# 小程序-2207 **Repository Path**: connerljlx_admin/mini-program-2207 ## Basic Information - **Project Name**: 小程序-2207 - **Description**: 2207班小程序 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-04-17 - **Last Updated**: 2023-04-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 项目成员 协同开发小程序， 你的微信账号，需要是 该小程序的 项目成员，代码在你的编辑器上运行，才能正常进行授权登录 授权登录需要 校验 （appid appsecret 以及 前端用户 授权code），校验不通过，导致 登录失败 注意注意注意： ​ 上班 开发小程序第一件事， 将你的微信号 发送给xx 添加为该 小程序项目成员 # 小程序的宿主环境 小程序运行环境 微信客户端 微信是原生app, ​ 1 组件 webview (显示 h5网页的容器组件 给 地址 渲染 该 网页) ​ 2 jscore 解析js 面试题？ ​ 小程序开发 和 h5开发的区别？ # app分类 + 原生app native app 使用原生安卓 IOS开发，内部组件 全部都是原生组件 优点： ​ 1 性能高（渲染性能、滚动性能等， 自带缓存） ​ 2 用户权限高， 具有访问 手机硬件api 权限 缺点： ​ 1 成本太高（开发成本、维护成本、用户使用成本） ​ 2 原生组件，上线后，整个界面 布局是无法改变的 ​ 3 原生组件 无法做动画（自带样式和功能的） + m站 h5 移动端网页 并不是app 优点: ​ 成本低 ​ 灵活 缺点： ​ 不流畅 性能消耗大 ​ 权限低 无法访问 手机硬件api 以及其他app的api + 混入app hybrid app 里面既有 原生组件， 通过定义 webview组件 渲染 h5 ​ 原生 app， 有一个 webview(渲染 网页)，实现了 在 app内 渲染 一个网页 优点： ​ 既保留了原生app的 优点（性能、权限高优点） ​ 解决了 原生app 组件 不灵活缺点 ​ 赋予 webview中 网页 一些 app才有的权限 （jsbrige） ​ jsbrige webview中嵌套的网页 可以 向 原生 安卓和 ios 互相通信， 举例， 原生 封装一些 原生才能访问的api，封装成函数 jsBrige传递给网页来调用，网页也可以封装 方法 jsBrige传给 app来调用d # 小程序代码组成 + 全局对象 应用对象 项目根目录 以 app开头文件 创建小程序全局应用对象 app.js 创建全局 app对象 定义 全局生命周期钩子 app.json 定义 小程序全局的配置 app.wxss 定义全局样式 （作用到全局任意一个页面） + 页面 是由4个文件共同组成 ​ 页面.wxml 结构 ​ 页面.wxss 样式 相当于 css ​ 页面.js 逻辑 ​ 页面.json 配置 # 小程序配置 ## 全局配置 根目录app.json 可以作用到 任意一个页面 ## 小程序如何自定义导航 + 设置 navigationStyle: "custom" + 自定义组件 充当导航 在 页面头部渲染 难点： ​ 不同机型， 导航栏 状态栏， 胶囊 高度 位置都不同， 动态 获取不同 设备状态栏高度 和胶囊按钮位置 来动态计算 自定义导航的 高度 # 小程序 网络 分成四种 + 普通http请求 + 上传文件 + 下载文件 + websocket # 小程序分包 [小程序分包](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html) 小程序上线时， 打代码包，上传到微信服务器，在微信下 打开小程序，会下载小程序代码包，运行小程序 小程序要求： ​ 代码体积不能超过 2m 否则无法上传到服务器 某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。 在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个**主包**。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而**分包**则是根据开发者的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。 目前小程序分包大小有以下限制： - 整个小程序所有分包大小不超过 20M - 单个分包/主包大小不能超过 2M 如何分包 ​ ``` ├── app.js ├── app.json ├── app.wxss │ └── pages │ ├── cat │ └── dog │ └── apple │ └── banana │ └── index │ └── logs // 分包 // 明确 分几个包，定义 每个包的 文件夹，将 不同分包的页面放到 分包文件夹中 ├── app.js ├── app.json ├── app.wxss ├── packageA │ └── pages │ ├── cat │ └── dog ├── packageB │ └── pages │ ├── apple │ └── banana ├── pages │ ├── index │ └── logs └── utils ``` 配置分包 ```json { "pages":[ "pages/index", "pages/logs" ], "subpackages": [ { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, { "root": "packageB", "name": "pack2", "pages": [ "pages/apple", "pages/banana" ] } ], "preloadRule": { "pages/index": { "network": "all", "packages": ["important"] }, "sub1/index": { "packages": ["hello", "sub3"] }, "sub3/index": { "packages": ["path/to"] }, "indep/index": { "packages": ["__APP__"] } } } ``` ### requiredPrivateInfos 自 2022 年 7 月 14 日后发布的小程序，使用以下8个地理位置相关接口时，需要声明该字段，否则将无法正常使用。2022 年 7 月 14 日前发布的小程序不受影响。 申明需要使用的地理位置相关接口，类型为数组。目前支持以下项目： - [getFuzzyLocation](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getFuzzyLocation.html): 获取模糊地理位置 - [getLocation](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html): 获取精确地理位置 - [onLocationChange](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.onLocationChange.html): 监听实时地理位置变化事件 - [startLocationUpdate](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.startLocationUpdate.html): 接收位置消息（前台） - [startLocationUpdateBackground](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.startLocationUpdateBackground.html): 接收位置消息（前后台） - [chooseLocation](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html): 打开地图选择位置 - [choosePoi](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.choosePoi.html): 打开POI列表选择位置 - [chooseAddress](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/address/wx.chooseAddress.html): 获取用户地址信息 如： ```json { "pages": ["pages/index/index"], "requiredPrivateInfos": [ "getLocation", "onLocationChange", "startLocationUpdateBackground" "chooseAddress" ] } ``` 注：若使用以上接口，均需在小程序管理后台，[「开发」-「开发管理」-「接口设置」](https://mp.weixin.qq.com/wxamp/categoryapi/index?token=1033339147&lang=zh_CN)中自助开通该接口权限 # 项目搜集 + 录制两个视频 1 讲解 项目各种功能 2 梳理 项目代码结构 + readme 说清除 项目技术栈 如何启动项目， 后台 安装 node mongodb 数据 转存一份 + 接口文档： 写清楚 用了哪些接口 + ppt # 小程序架构 ## 全局对象 app 在根目录下 app.js 中通过 App函数 生成全局小程序对象， 必须且只能调用一次 生成全局对象 注意： ​ 参数对象 下 钩子 最终挂载到实例 app ```js App({ // 指定生命周期钩子 onLaunch(){ // 监听小程序初始化完成 （类比 组件 created） }, onShow(){ // 监听小程序 显示 或者 切前台 }, onHide(){ // 监听小程序切后台 }, onPageNotFound(){ // 监听错误路由跳转 }, any, // 我们可以自定义任意的属性和方法 挂载 全局app对象上 // 管理 多个页面公共的数据 globalData: {} }) ``` ### 获取全局app对象的api getApp() 全局方法 可以在小程序任意一处 代码调用返回就是 全局 app这个实例对象 ## 页面对象 页面js中 通过 Page函数创建页面对象 ```js Page({ // 管理页面的数据 页面实例 data属性 this.data.xxx data: { msg: '你好小程序' }, // 页面的生命周期钩子 onLoad() { // 监听页面实例 加载完成 console.log('home的onLoad触发了'); }, onShow() { // 监听页面开始显示 或者 切回当前页面时 console.log('home的onShow触发了'); }, onReady() { // 监听小程序初始化渲染完成 类比 mounted console.log('home的onReady触发了'); }, onHide() { // 监听页面隐藏 比如 正常路由 跳转 console.log('home的onHide触发了'); }, // 监听页面卸载 /* 哪些场景导致页面卸载 1 跳转路由使用 redirect形式跳转 2 路由返回操作 */ onUnload() { console.log('home的onUnload触发了'); }, // 一下是 当前页面的事件监听函数 // 用户下拉的动作 onPullDownRefresh() { setTimeout(() => { wx.stopPullDownRefresh() }, 2000) }, // 监听用户上拉触底事件 实现上拉加载 onReachBottom() { }, /** * 监听用户点击右上角分享 默认 分享是灰色，无法分享，定义这个钩子即可 */ onShareAppMessage(opts) { // 自定分享的 标题、页面、封面 return { title: "小哥哥小姐姐来玩啊", path: "/pages/home/home", imageUrl: "https://img0.baidu.com/it/u=255798388,2299729150&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300" } }, // 监听分享到朋友圈 onShareTimeline(){}, /* 注意：请只在需要的时候才在 page 中定义此方法，不要定义空方法。以减少不必要的事件派发对渲染层-逻辑层通信的影响。 注意：请避免在 onPageScroll 中过于频繁的执行 setData 等引起逻辑层-渲染层通信的操作。尤其是每次传输大量数据，会影响通信耗时。 */ onPageScroll({scrollTop}){ console.log(scrollTop); } }) ``` ### 获取已经打开所有的 页面实例对象 getCurrentPages() 返回的是数组 第0个是首页 实例 最后一个是当前页 面试题？ ​ 小程序的生命周期 （全局有哪些 页面的有哪些） ​ 小程序页面生命周期 小程序下拉刷新如何 实现 1 配置中开启下拉刷新 ```json "enablePullDownRefresh": true ``` 2 在页面 下拉 事件中 请求新的列表 ```js onPullDownRefresh() { this.fetchItems() }, ``` 3 请求成功后 调用 wx.stopPullDownRefresh()结束下拉的动作 # 小程序数据挂载