# 小程序-2205 **Repository Path**: connerljlx_admin/applet-2205 ## Basic Information - **Project Name**: 小程序-2205 - **Description**: 啊啊我的夫人共同好友句酷咯破 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-01-30 - **Last Updated**: 2023-02-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 小程序上线流程 https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/release.html#%E5%8F%91%E5%B8%83%E4%B8%8A%E7%BA%BF ## 版本管理 开发版（体验版） 审核版本 线上版本 ## 成员管理 体验成员： 体验版本 权限 项目成员： 小程序协同开发过程中，开发者 登录 开发者工具 微信账号一定是 项目成员，，才能获取 获取微信用于个人信息 权限， 小程序 登录 权限等 需要用到 appid和appSecret # 面试题 小程序开发和 h5区别 # app分类 + 原生app native app 使用原生安卓 ios开发 优点： 1 性能高 流畅 2 用户权限高 （app可以获取 设备各种权限 网页就不行） 缺点： 1 成本高 （开发、维护成本、使用成本） 2 不灵活 一旦上线安装后，app内部样式和结构是无法改变的 3 组件 不灵活 （组件自带样式和功能的），无法写动画 + webapp m站 本质上 不是app 其实就移动端网页 优点： 成本低 灵活 （上线后 结构可以随时变、可以实现复杂动画） 缺点： 1 不流畅 性能低 2 权限低 网页不具备操作硬件设备权限 + hybrid app 混合开发app 原生组件中 叫 webview(类比html中 iframe标签)，在app中显示 网页， 原生app中通过webview 嵌套 html网页 jsbrige: webview中嵌入网页 需要 获取 设备权限，而网页是没有权限，此时 原生开发 就可以封装 方法，通过webview 以及jsbrige 传递给网页，由网页调用 比如 微信公众号网页 可以调用 weixin-js-sdk,调用硬件和 微信相关操作 # 小程序代码组成 ## 全局 根目录下 app开头文件 app.js 全局js 创建全局唯一 小程序对象 app.json 全局配置文件 app.wxss 全局样式 作用任意一个页面 ## 页面 页面.wxml 结构文件 页面.wxss 样式文件 相当于 css 页面.js 页面 js逻辑文件 页面.json 页面配置 注意： 注意 由四个文件共同组成一个页面，要求四个页面一定在同一目录，四个文件 一定要同名 # 小程序自定义导航 思路 1 配置中定义 去除 默认导航 ```json "navigationStyle": "custom" ``` 2 自定义组件 定义导航，在 导航位置渲染 难点： 计算 胶囊 距离顶部距离 预留 显示状态栏 ，下面区域 定义自定义导航内容 # 如何开启小程序下拉 + 在页面json文件开启 ```json "enablePullDownRefresh": true ``` + 在页面 js 中 监听 下拉事件 ```js onPullDownRefresh() { // 发送请求，请求新的数据 request().then(res => { // 一定要手动调用api 结束下拉状态 wx.stopPullDownRefresh(); }) } ``` # 小程序分包 https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html 什么时候需要分包加载： 默认情况下，小程序上线上传代码时，默认只会加载一个代码包，小程序代码包体积不能超过2m，否则提示体积过大无法上传 原理： 将一个小程序 拆分为 代码包 分成 主包 和分包 某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。 在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。 目前小程序分包大小有以下限制： 整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M # 小程序架构 ## 应用实例 注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。 App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果
属性 类型 默认值 必填 说明 最低版本
onLaunch function 否 生命周期回调——监听小程序初始化。
onShow function 否 生命周期回调——监听小程序启动或切前台。
onHide function 否 生命周期回调——监听小程序切后台。
onError function 否 错误监听函数。
onPageNotFound function 否 页面不存在监听函数。 1.9.90
onUnhandledRejection function 否 未处理的 Promise 拒绝事件监听函数。 2.10.0
onThemeChange function 否 监听系统主题变化 2.11.0
其他 any 否 开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问
小程序提供全局方法 getApp可以在小程序任意一处 js中调用 获取小程序 唯一的 应用实例 ## 页面实例 每个页面的js文件中创建页面实例 注册小程序中的一个页面。接受一个 `Object` 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。 ```js Page({ // 存储当前页面的数据 挂载到页面实例的 data属性中 data: { msg: '你好小程序' }, onLoad() { // 生命周期回调—监听页面加载 类似vue组件中 created 页面实例加载完成 页面还未开始显示 console.log('页面实例初始化完成'); }, onReady() { // 生命周期回调—监听页面初次渲染完成 类似于vue组件的mounted console.log('onReady触发了'); }, /** * 生命周期函数--监听页面显示 * 显示多次 页面首次 显示， 当前再一次显示时 */ onShow() { console.log('home的onShow触发'); }, /** * 生命周期函数--监听页面隐藏 */ onHide() { console.log('home页hide了'); }, /** * 生命周期函数--监听页面卸载 1 redirect方式跳转页面 会卸载档期页面 2 返回上一页时卸载当前页面 */ onUnload() { console.log('页面卸载了'); }, // 以下是常用的 事件监听函数 /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { console.log('用户下拉了'); }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { console.log('触底了'); }, /** * 用户点击右上角分享 */ onShareAppMessage() { console.log('点击了分享'); return { title:"快来玩啊", path: '/pages/home/home', imageUrl: 'https://img1.baidu.com/it/u=1028453960,1161651952&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500' } }, // 定义分享到朋友圈的 事件函数 即可开启分享到朋友圈选项 onShareTimeline(){}, onPageScroll({scrollTop}){ console.log(scrollTop); } }) ``` getCurrentPages 方法获取 当前已经打开所有页面实例， 第一个 是首页，最后一个是当前页