# 小程序-2206 **Repository Path**: connerljlx_admin/applet-2206 ## Basic Information - **Project Name**: 小程序-2206 - **Description**: 2206班小程序基础 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-03-06 - **Last Updated**: 2023-03-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 项目成员： 项目成员： ​ 实际开发中， 开发者工具登录的账号 ，一般 跟 appid 没有关系， 造成开发时， 登录没有权限，返回403 需要将 微信号 发给 公司 负责 将 微信号添加为 该小程序的项目成员 才可以继续开发 # 小程序代码组成 ## 页面 由一下四个文件组成 wxml 相当于 html 小程序 代码结构 wxss 相当于css js 小程序 js代码 json 小程序配置文件 ## 全局 ​ 根目录下 以 app开头三个文件 app.js 创建全局小程序应用对象 app.wxss 全局样式 app.json 全局配置 # 小程序配置 ## 全局配置 位于 根目录下 app.json 设置小程序 全局 窗口表现啊 等 ## 页面配置 ## sitemap配置 ## 小程序如何自定义导航 配置 json中配置 ```json "navigationStyle":"custom" ``` 自动去除 默认导航，保留右上角 胶囊按钮， 自己自定义 组件 放到页面顶部充当 导航 ### 小程序 除了 js 以外的路径支持 绝对路径 / 写在最前面 代表项目根目录 或者 相对路径 # 小程序分包： 小程序上传到腾讯服务器中，点击上传代码，默认只会生成一个代码包 腾讯为了小程序打开效率 要求 一个 小程序代码包 源码体积不能超过 2m 问题？ ​ 某些大型小程序源码超出2m 上传按钮点击 上传不了 此时就要分包处理 某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。 在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个**主包**。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而**分包**则是根据开发者的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。 目前小程序分包大小有以下限制： - 整个小程序所有分包大小不超过 20M - 单个分包/主包大小不能超过 2M https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html # 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)中自助开通该接口权限。 # 小程序开发和 H5开发区别 # app分类 + native app 原生app 原生安卓 ios开发 优点： ​ 1 性能高 ​ 2 权限高 （可以访问 手机硬件 api） ​ 3 有缓存 缺点： ​ 1 成本高 （开发成本、维护成本、使用成本） ​ 2 不灵活，app 用户使用后 内部结构无法 改变 + m站 移动端网页 优点： ​ 1 成本低i ​ 2 灵活 缺点： ​ 1 权限低 无法 访问 硬件api 以及 其他app权限 ​ 2 性能低 + hybrid app 混合app app 部分是原生，部分是 h5, 原生有一个组件 叫 webview (相当于 一个容器 给一个地址 渲染 移动端网页 相当于浏览器窗口) 微信公众号网页 就是典型 混合app网页 优点： ​ 1 既保留原生app 权限高特点，一些 耗性能区域 使用原生组件 也会有较好的性能 ​ 2 app 某些区域结构需要变化使用webview 嵌入h5 也保留h5灵活 ​ 3 可以写动画 嵌入到 app 中h5网页 如何调用 硬件api ​ jsbrige （典型 比如 微信公众号 网页 引入 weixin js-sdk) ​ 原理： ​ 1 app封装好 方法 通过 webview 传递 网页 全局window h5网页调用即可 ​ 2 h5封装js方法 传递 给 原生app调用 # 全局小程序对象 app 注册小程序。接受一个 `Object` 参数，其指定小程序的生命周期回调等。 **App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。** ```js App({ // 全局 生命周期钩子函数 onLaunch(){ // 全局对象实例化完成 console.log('小程序实例化完成'); }, onShow () { // 监听小程序初始渲染 和 切前台 }, onHide(){ // 监听小程序切后台 }, onPageNotFound(){ // 监听错误的路由操作 }, // any 可以添加任意属性方法到 应用实例上 baseURL: 'xxxx', act(){ console.log(this.baseURL); }, // 存储多个组件公共的数据 globalData: { a: 10, b: 20 } }) ``` ### 如何获取全局对象实例 小程序提供 全局方法 getApp() 可以在 任意一处js中调用获取 # page实例 在页面的 js文件中 通过 Page函数 创建页面实例，传递 options参数 ```js Page({ /** * 存储页面的初始数据 */ data: { msg: '你好小程序' }, fn(){ console.log(this.data.msg); }, // 一下是一些生命周期钩子 onLoad() { // 监听 页面 实例 加载完成 类似vue组件中 created console.log('onLoad触发'); this.fn(); }, onShow(){ // 监听页面 显示 类似于 beforeMount }, onReady(){ // 小程序页面 初次渲染完成 类似于 mounted }, onHide () { // 监听页面隐藏 }, onUnload () { console.log('home页onUnload触达'); // 监听页面卸载 /* 啥时候卸载 1 回退上一页 当前页会卸载 2 跳转路由时 使用 redirect跳转 */ }, // 以下是页面 事件监听函数 onPullDownRefresh(){ // 监听用户下拉的动作 setTimeout(() => { wx.stopPullDownRefresh() }, 2000) }, onReachBottom(){ // 监听 上拉触底事件 console.log('到达底部了'); }, onShareAppMessage(){ // 自定义转发 标题 封面 return { title: '小姐姐小哥哥来玩啊', path: '/pages/home/home', imageUrl: 'https://img0.baidu.com/it/u=3647526762,2365131676&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' } }, onShareTimeline(){ return { title: '小姐姐小哥哥来玩啊', query: "a=10&b=20", imageUrl: 'https://img0.baidu.com/it/u=3647526762,2365131676&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' } }, /* onPageScroll({scrollTop}){ console.log(scrollTop); } */ }) ``` ### 获取页面实例 getCurrentPages() 返回的是数组 第一个是首页实例 最后一个是当前页 # 如何实现小程序下拉刷新 1 在配置中开启下拉刷新 ```json { "enablePullDownRefresh": true } ``` 2 在页面的 onPullDownRefresh 监听下拉动作的函数中 重新请求列表数据 ```js onPullDownRefresh(){ // 重新请求列表数据 this.fetchItems() } ``` 3 列表请求完成后 调用 wx.stopPullDownRefresh() 手动结束下拉状态 面试题？ ​ 小程序 生命周期钩子 函数有哪些（回答全局的和页面的） ​ 小程序页面生命周期钩子 onLoad和onShow区别 # 小程序数据管理 data 和setData # 小程序 渲染数据