# 小程序2303 **Repository Path**: connerljlx_admin/mini-program-2303 ## Basic Information - **Project Name**: 小程序2303 - **Description**: 2303班原生微信小程序 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-11-06 - **Last Updated**: 2023-11-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 小程序代码结构 全局应用实例 ​ app.js 创建全局应用实例 代码 （相当于vue中的入口文件） ​ app.wxss 全局样式文件 ​ app.json 全局配置 页面 （一个页面由4个文件 共同组成） ​ .wxml 页面结构文件 ​ .wxss 页面样式文件 ​ .js 页面 逻辑文件 ​ .json 页面配置文件 ​ 要求：同一目录 同一个名字 组件 # app分类 ### 原生app native app 安卓 IOS 组件开发 （c/s） 优点： 1 应用权限高 （可以访问 设备 底层 硬件api） ​ 2 性能好 运行 流程 缺点： ​ 1 成本过高 （开发成本、维护成本、使用成本、运营成本） ​ 2 app用户安装后，内部结构 无法改变 组件 不灵活 （无法做复杂动画） ### h5 m站 （移动端网页） 优点： ​ 1 灵活 （结构灵活） ​ 2 开发成本维护成本使用成本低 缺点： 1 性能较差 （无限加载 长列表） ​ 2 应用权限低 （访问不了 底层api 硬件api） ### hybrid app 混合app 原生app 有一个组件 webview,用于在 app内部渲染 h5网页（webview相当于一个 浏览器窗口，定义webview 位置尺寸），给url将url指向网页 渲染在 app内部 app和 webview中的h5还可以交互 （jsbrige） (微信公众号网页 微信js-sdk) 优点： ​ 1 性能高 ​ 2 结构灵活 （需要变化 区域 使用webview 渲染） ​ 3 应用权限高 通过jsbrige 将 原生 方法 传递 给 h5调用 # 小程序配置 + 全局配置 + 页面配置 + sitemap配置 # 小程序资源路径 资源： ​ 结构中资源 （不是指js） 直接绝对路径和相对路径 "../pages/home/home" "/pages/home/home" # 小程序分包流程 小程序上线时，将源码 打包 上传到 腾讯服务器中，当我们在微信中 打开某个小程序时， 需要 去 服务器下载小程序代码包，微信客户端 解析小程序 运行代码包 为了 性能： 微信要求 小程序 代码包 体积 不能超出 2m, 开发大型小程序时 源码 体积打包后 超过2m, 开发者中无法上传 小程序代码包 到 腾讯服务器（无法上线） 怎么解决？ ​ 1 特别接近2m, 优化代码 ​ 2 小程序分包加载 （原理：将一个小程序 分成多个代码包） https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html + 未分包前的 代码结构 ``` ├── app.js ├── app.json ├── app.wxss ├── pages │ ├── index │ └── logs ├── apple │ └── banana ├── cat │ └── dog └── utils ``` 做好合理 分包目录（确定主包里有哪些页面 子包里有哪些页面） 分包 代码结构目录 ``` ├── app.js ├── app.json ├── app.wxss ├── packageA │ └── pages │ ├── cat │ └── dog ├── packageB │ └── pages │ ├── apple │ └── banana ├── pages │ ├── index │ └── logs └── utils ``` 定义分包的配置文件 app.json中 配置分包 ```json { "pages":[ "pages/index", "pages/logs" ], "subpackages": [ { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, { "root": "packageB", "name": "pack2", "pages": [ "pages/apple", "pages/banana" ] } ] } ``` 分包后：注意跳转路径问题 # 小程序应用实例 注册小程序。接受一个 `Object` 参数，其指定小程序的生命周期回调等。 **App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果** ```js App({ onLaunch(){ // 实例初始化完成触发 （类比 vue组件created） console.log('onLaunch触发'); }, onShow(){ // 生命周期回调——监听小程序启动或切前台。 console.log('onShow触发'); }, onHide(){ // 切后台 console.log('onHide触发'); }, onError(){ // 监听错误 }, onPageNotFound(){ // 跳转页面时 404了 没有匹配页面 }, // 自定义属性方法 自动挂载到全局应用实例上 baseURL:"https://xxx.xxx.com", act(){ console.log(this.baseURL); }, // globalData 设计全局状态管理属性 globalData: { num: 10 } }) ``` #### 获取全局小程序 实例 getApp ```js const app getApp(); app.act() app.globalData.xxx ``` # 页面实例 Page注册小程序中的一个页面。接受一个 `Object` 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。 ```js Page({ /** * 页面的初始数据 */ data: { msg: "你好小程序" }, changeMsg(){ this.setData({ msg: "数据改变了" }) }, /** * 生命周期函数--监听页面加载 */ onLoad() { // 监听页面实例初始化完成 （类比vue created） console.log('onLoad触发'); /* wx.showShareMenu({ menus: ['shareAppMessage', 'shareTimeline'] }); */ }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { // 类比 vue mounted console.log('onReady'); }, /** * 生命周期函数--监听页面显示 */ onShow() { console.log('onShow触发'); }, /** * 生命周期函数--监听页面隐藏 */ onHide() { console.log('onHide触发'); }, /** * 生命周期函数--监听页面卸载 */ onUnload() { // 监听页面卸载 console.log('onUnload触发'); }, // 以下是事件监听函数 /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { console.log('用户下拉了'); setTimeout(() => { // 成功后结束下拉状态 wx.stopPullDownRefresh(); }, 2000) }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { console.log('用户上拉触底事件'); }, onShareAppMessage(){ // 返回对象中 自定义分享内容 return { title: "小哥哥小姐姐快来玩啊", imageUrl: "https://img0.baidu.com/it/u=62816864,2349832021&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" } }, onShareTimeline(){}, onPageScroll({scrollTop}){ console.log(scrollTop) } }) ``` 全局api getCurrentPages() 返回的是 现在 已经打开所有的页面实例 返回是数组： 数组的第0是首页 数组 最后一个是当前页 # 小程序页面数据管理 小程序是数据驱动视图 但不是 mvvm的 数据不能直接修改 # 小程序上线流程 # 小程序常见面试题 - 小程序开发 和 h5开发区别 - 小程序如何自定义导航 1 设置 "navigationStyle":"custom" 去除默认导航 保留右上角胶囊按钮 2 自定义导航组件 放到 对应页面顶部 （动态计算导航栏 高度） - 小程序网络设置 1 跨域请求 2 接口域名必须是 加密协议 https wss 3 分成不同请求 （配置不同请求域名） ​ (1) 普通 http请求 wx.request ​ (2) websocket请求 ​ (3) 上传文件 ​ (4) 下载文件 - 小程序生命周期钩子 全局钩子有哪些 onLaunch onShow onHide onPageNotFound onError **页面生命周期钩子有哪些？ 页面生命周期钩子 onLoad和onShow区别？ (小程序登录鉴权判断应该在哪里) 哪些情况会让一个页面卸载 - 如何开启页面 下拉刷新 1设置中开启下拉刷新 ```json "enablePullDownRefresh": true ``` 2 页面的 下拉监听函数中 重新请求列表 ```js onPullDownRefresh(){ // 请求 列表 request('xxx').then(res => { // 成功后结束下拉 状态 wx.stopPullDownRefresh() }) } ```