# 小程序-2305 **Repository Path**: connerljlx_admin/mini-program-2305 ## Basic Information - **Project Name**: 小程序-2305 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2024-01-08 - **Last Updated**: 2024-04-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 小程序代码构成 ### 页面 由四个文件共同组件一个页面 .wxml 页面结构 （类比 html） .wxss 样式文件 （类比css） .js 逻辑 .json 配置文件 ### 全局 全局配置或者 入口 根目录下以app开头的三个文件 app.js 全局入口 注册 小程序 应用对象 app.json 全局配置 （针对所有页面生效 优先级 低于 页面的json） app.wxss 全局样式 （这里样式 作用所有的 页面） # 小程序宿主环境 # app分类 #### native app 原生app 使用原生安卓 IOS 鸿蒙开发的 app 优点： ​ 1 性能高，流畅度高 ​ 2 应用权限高、可以调用手机 包括底层各种api 缺点： ​ 1 成本太高（开发成本、维护成本、使用成本） ​ 2 内容 结构 固定 安装后，无法改变 #### m站 h5网页 本质不是app 就是移动端网页 优点低： ​ 1 成本低 ​ 2 网页 结构 灵活 随时可变 （组件结构灵活可以组成各种复杂动画） 缺点： ​ 1 dom操作 消耗性能 ​ 2 应用权限低 #### hybrid app 混合app 原生app有一个组件 webview,这个标签 相当于 浏览器窗口，指定url，url指向的 h5网页，就可以在 webview组件中渲染 优点： ​ 1 解决了 原生开发 结构固定不能变化（不能做复杂动画问题） （需要变化的使用 webview 渲染h5网页） ​ 2 app中 耗性能 （长列表 使用原生组件开发）得到解决 ​ 3 通过jsbrige 可以实现 原生 和 h5 互通 （互相封装方法 互相传递互相调用 解决了 应用权限问题） # 分包流程 某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。 在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个**主包**。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而**分包**则是根据开发者的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。 目前小程序分包大小有以下限制： - 整个小程序所有分包大小不超过 20M（开通虚拟支付后的小游戏不超过30M） - 单个分包/主包大小不能超过 2M 对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。 https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html ``` ├── app.js ├── app.json ├── app.wxss ├── pages │ index │ logs cat │ dog apple │ banana └── utils ``` 修改项目目录结构 ``` ├── app.js ├── app.json ├── app.wxss ├── packageA │ └── pages │ ├── cat │ └── dog ├── packageB │ └── pages │ ├── apple │ └── banana ├── pages │ ├── index │ └── logs └── utils ``` # 小程序架构 ## app 全局对象 小程序实例对象 注册小程序。接受一个 `Object` 参数，其指定小程序的生命周期回调等。 **App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。** ## 参数 #### Object object | 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | | :----------------------------------------------------------- | :------- | :----- | :--- | :----------------------------------------------------------- | :----------------------------------------------------------- | | [onLaunch](https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onLaunch-Object-object) | function | | 否 | 生命周期回调——监听小程序初始化。 | | | [onShow](https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onShow-Object-object) | function | | 否 | 生命周期回调——监听小程序启动或切前台。 | | | [onHide](https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onHide) | function | | 否 | 生命周期回调——监听小程序切后台。 | | | [onError](https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onError-String-error) | function | | 否 | 错误监听函数。 | | | [onPageNotFound](https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onPageNotFound-Object-object) | function | | 否 | 页面不存在监听函数。 | [1.9.90](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | [onUnhandledRejection](https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onUnhandledRejection-Object-object) | function | | 否 | 未处理的 Promise 拒绝事件监听函数。 | [2.10.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | [onThemeChange](https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onThemeChange-Object-object) | function | | 否 | 监听系统主题变化 | [2.11.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | 其他 | any | | 否 | 开发者可以添加任意的函数或数据变量到 `Object` 参数中，用 `this` 可以访问 | | globalData 存储多个页面公共的数据 ```js // App调用创建应用实例 App({ // 存储 多个页面的公共数据 globalData: { num: 10 }, onLaunch() { }, /** * 当小程序启动，或从后台进入前台显示，会触发 onShow */ onShow(opts) { // console.log(opts.query) }, /** * 当小程序从前台进入后台，会触发 onHide */ onHide() { }, /** * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 */ onError(msg) { console.error(msg) }, }) ``` ### getApp() 全局方法，获取全局唯一 app 小程序实例对象 ## 页面对象 Page 注册小程序中的一个页面。接受一个 `Object` 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等 ## 参数 #### Object object | 属性 | 类型 | 默认值 | 必填 | 说明 | | :----------------------------------------------------------- | :----------- | :----- | :--- | :----------------------------------------------------------- | | [data](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#data) | Object | | | 页面的初始数据 | | options | Object | | | 页面的组件选项，同 [`Component` 构造器](https://developers.weixin.qq.com/miniprogram/dev/api/xr-frame/classes/Component.html) 中的 `options` ，需要基础库版本 [2.10.1](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | [behaviors](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html) | String Array | | | 类似于mixins和traits的组件间代码复用机制，参见 [behaviors](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html)，需要基础库版本 [2.9.2](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | [onLoad](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onLoad-Object-query) | function | | | 生命周期回调—监听页面加载 | | [onShow](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShow) | function | | | 生命周期回调—监听页面显示 | | [onReady](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onReady) | function | | | 生命周期回调—监听页面初次渲染完成 | | [onHide](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onHide) | function | | | 生命周期回调—监听页面隐藏 | | [onUnload](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onUnload) | function | | | 生命周期回调—监听页面卸载 | | [onRouteDone](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onRouteDone) | function | | | 生命周期回调—监听路由动画完成 | | [onPullDownRefresh](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPullDownRefresh) | function | | | 监听用户下拉动作 | | [onReachBottom](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onReachBottom) | function | | | 页面上拉触底事件的处理函数 | | [onShareAppMessage](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object) | function | | | 用户点击右上角转发 | | [onShareTimeline](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareTimeline) | function | | | 用户点击右上角转发到朋友圈 | | [onAddToFavorites](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onAddToFavorites-Object-object) | function | | | 用户点击右上角收藏 | | [onPageScroll](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPageScroll-Object-object) | function | | | 页面滚动触发事件的处理函数 | | [onResize](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onResize-Object-object) | function | | | 页面尺寸改变时触发，详见 [响应显示区域变化](https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html#在手机上启用屏幕旋转支持) | | [onTabItemTap](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onTabItemTap-Object-object) | function | | | 当前是 tab 页时，点击 tab 时触发 | | [onSaveExitState](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onSaveExitState) | function | | | 页面销毁前保留状态回调 | | 其他 | any | | | 开发者可以添加任意的函数或数据到 `Object` 参数中，在页面的函数中用 `this` 可以访问。**这部分属性会在页面实例创建时进行一次深拷贝**。 | ### 小程序数据管理 存储在 data属性中，可以在模板渲染 + 获取数据 ```js this.data.数据名 ``` + 修改 不能直接修改 必须调用setData来修改 ```js this.setData({ key: value }) this.setData({ msg: "这是修改后的值" }) this.setData({ msg: "这是修改后的值" }, () => { // 数据修改后 视图更新是异步的 当视图更新完成 回调触发 }) ``` # 面试题 1 小程序开发和 h5开发区别？ 2 如何自定义导航栏 ​ 1 去除默认导航栏 配置中 ```json "navigationStyle": "custom" ``` 去除默认导航 会保留右上角胶囊按钮 ​ 2 自定义导航组件，在 页面 顶部使用即可 ​ 重点 动态计算导航栏高度 3 小程序生命周期钩子 （全局有哪些 页面有哪些） 4 页面钩子中onLoad和onShow 有什么区别？ （页面在登录鉴权判断时， 判断应该在 onLoad还是在 onShow判断） 5 导致小程序页面卸载的场景 6 页面开启下拉刷新 (1) 配置中开启下拉刷新配置 ```json "enablePullDownRefresh": true ``` (2) 页面的 onPullDownRefresh 请求数据完成刷新 注意 请求完成后 调用*wx.stopPullDownRefresh()*结束下拉状态 7 如何 显示 分享 和分享朋友圈按钮 (1) 页面中定义 空 监听和 监听分享到朋友圈的事件即可 (2) 调用api 显示 ```js wx.showShareMenu({ menus: ['shareAppMessage', 'shareTimeline'] }) ```