小程序---- 基础知识汇总

Posted 2021-03-05 pinkpinkc

一、基本问题

1、生命周期

（1）全局

• onLaunch：初始化完成时
• onShow：小程序启动或从后台进入前台显示时
• onHide：小程序隐藏，从前台进入后台时
• onError：小程序发生脚本错误，或api调用失败时触发，会带上错误信息
• onPageNotFound：小程序要打开的页面不存在时触发，会带上页面信息回调函数

（2）页面

• onLoad：监听页面加载
• onReady：监听页面初次渲染完成
• onShow：监听页面显示
• onHide：监听页面隐藏
• onUnload：监听页面卸载
• onPullDownRefresh：监听用户下拉动作
• onReachBottom：页面上拉触底事件的处理函数
• onShareAppMessage：用户点击右上角分享
• onPageScroll：页面滚动触发事件的处理函数
• onTabItemTap：当前是tab页时，点击tab时触发
• onResize：监听当页面尺寸发生改变的时候

 

2、基础使用

小程序尺寸单位：rpx

常用标签：<view><test><block><image><scroll-view><swiper>

常用属性：wx:for，wx:if，wx:else，wx:key

事件绑定：bindtap，catchtap  

动态设置当前页面标题：wx.setNavigationBarTitle()

 

3、路由跳转方式

a.组件 

 <navigator></navigator>

b.方法

 wx.switchTab：只跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。【Tab切换】

 wx.reLaunch： 关闭所有页面，打开到应用内的某个页面。【重启动】

 wx.redirectTo：关闭当前页面，打开任意非tabBar页面。【页面重定向】

 wx.navigateTo：保留当前页面，打开任意非tabBar页面，使用 wx.navigateBack 可以返回到原页面，最多十层。【打开新页面】

 wx.navigateBack：关闭当前页面，返回上一页面或多级页面。【页面返回】

 

4、路由传参/页面传值

a. 给<navigator>添加 ‘data-xxx‘ 属性来传递我们需要的值，然后通过绑定事件的 e.currentTarget.dataset 或 onLoad 的 param 参数获取

b. 设置 id 的方法标识来传值，即标签添加‘data-id‘ 属性，通过 e.currentTarget.id 获取设置的id值，然后通过设置全局对象的方式传递到 app.globalData，在onLoad中使用option参数接收

c. 在 navigator 路由跳转的路径中添加参数传值，可以进行拼接或传对象，在onLoad中使用option参数接收

 

5、组件和页面之间传值

a. 组件传给页面 - 通过事件触发

* 组件的点击事件中：this.triggerEvent(‘eventName‘, ‘传给页面的值‘);

* 页面wxml中：<myComponent bind:eventName="change"></myComponent>

* 页面js中： change(e){console.log(e.detail)} //接收值

 

b. 页面传给组件 - 通过properties

* 页面wxml中：<myComponent xxx="哈哈"></myComponent>

* 组件js中：

properties: {

    xxx:{

        type:String,

        value: ‘默认值‘,

        observer:function(newVal,oldVal){ // 可检验传递的值

            console.log(newVal, oldVal)

        }

    }

}

 

6、数据双向绑定

小程序直接修改this.data的属性是不可以同步到视图的，必须调用this.setData。

 

7、事件

a、冒泡事件

bindtap事件绑定不会阻止冒泡事件向上冒泡。

b、非冒泡事件

catchtap事件绑定可以阻止冒泡事件向上冒泡。

 

8、缓存，存储

a、异步 

// 存储数据

wx.setStorage({ 

    key:缓存数据的名称,

    data:需要缓存的数据, 

    success:成功回调 

}) 

// 获取数据

wx.getStorage({ 

    key:"需要获取数据的名称", 

    success:成功的回调 

})

// 清除数据

 wx.removeStorage(key) 

 

b、同步 

wx.setStorageSync(key,val)

wx.getStorageSync(key) 

wx.removeStorageSync(key)

 

9、授权 (点击button)

目前不推荐使用wx.getUserInfo()，建议通过button按钮发起用户授权。

<button open-type="getUserInfo" bindgetuserinfo="onGotUserInfo">

 

10、封装请求

- 具体需要根据实际项目需求进行封装

- 参考：https://www.jianshu.com/p/2e80c96ce712

- 小程序默认请求：wx.request()

 

11、封装api

- 将所有接口放在统一的js文件并导出

- 在app.js中创建封装请求数据的方法

- 在子页面中调用封装的方法请求数据

 

12、自定义组件

1、通过Component({})来创建一个组件，注意组件中的事件需要写在methods中，最好以下划线开头

2、在使用组件的时候，在页面的配置项中配置usingComponents, key值为组件名称，val值为组件路径 

3、页面与组件进行传值的时候，在组件内部通过properties进行接收

4、详细了解：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

4、封装组件步骤：

• 在components中创建组件
• 组件json中添加：{ "component": true}
• 页面json中添加：{ "usingComponents": { "组件名": "组件路径" } }
• 页面wxml中添加：<myComponent></myComponent>

 

二、功能问题

1、登录

前端逻辑：

- 调用 wx:login(),获取code

- 调用后端登录接口，并将code传递过去，后端返回token

- 将token保存到本地

- 在app.js的onLaunch生命周期中，使用 checkSession 验证登录状态，若失效，则清除本地token，引导用户重新登录（也可以在封装的请求里）

 

后端逻辑：

- 获取code

- 结合appid,appsecret,code, 换取openid,session_key（不能给前端）

- 将wx的openid和本项目的用户系统进行关联

- 根据openid找到uid，将uid变成token返回前端

 

2、支付

- 前端调用下单接口，后端存储数据，处于未支付状态

- 后端请求微信的服务器，微信服务器验证身份，验证成功后返回prepay_id预订单id

- 后端接收到预订单id后进行加密操作，并将五个参数返回给前端

- 前端调用wx.requestPayment()方法，用户完成支付后将信息发送给微信服务器

- 微信服务器告知前端支付结果，前端进行展示

- 微信服务器再告知后端，后端将未付款的订单更新成已支付

 

3、地图

- <map> 配置项：

   marker 标记点用于在地图上显示标记的位置

   control 在地图上显示控件，控件不随着地图移动。即将废弃，请使用 cover-view

- 获取用户地理位置：wx.getLocation({})

- 获取用户的收货地址 wx.chooseLocation({})

- 如何调用地图控件 wx.createMapContext({})

- 获取系统信息 例如屏幕宽度高度 wx.getSystemInfo({})

 

4、音乐

a. 如何调用音频控件 

wx.createInnerAudioContext() 

 

b. 如何播放音乐 

let audio = wx.createInnerAudioContext() 

audio.play() 

 

c. 如何监听是否播放 

let audio = wx.createInnerAudioContext() 

audio.onPlay(()=>{}) 

 

d. 如何获取音乐时间的总长度 let audio = wx.createInnerAudioContext() 

//一定要在开始播放后获取 

audio.onTimeUpdate((res)=>{ audio.duration })

 

e. 如何获取音乐实时播放的时间 let audio = wx.createInnerAudioContext() 

//一定要在开始播放后获取 

audio.onTimeUpdate((res)=>{ audio.currentTime }) 

 

f. 如何将音乐时间 跳转到指定位置 

let audio = wx.createInnerAudioContext() audio.seek(number) 

 

g. 如何检测音乐的播放状态 

let audio = wx.createInnerAudioContext() 

audio.paused: true 的话我们可以调用 audio.play()方法进行播放;false的化我们可以调用 audio.paused()方法暂停播放。

 

5、下拉刷新

在json文件配置：{"enablePullDownRefresh": true}

 

- 设置onPullDownRefresh函数实现【主要用这个方式】

- 监听scroll-view，bindscrolltolower滑动到底部的监听

- 停止下拉刷新 wx.stopPullDownRefresh()

 

6、上拉加载

上拉加载时使用数组拼接：showList: [...this.data.showList, ...data.data.data.list]，思路就是将新获取的数据追加到data的原始数据中。

 

具体实现：https://www.jianshu.com/p/ab4b366b147f

 

7、转发分享

- onShareAppMessage()：点击右上角菜单中的“转发”按钮

- <button open-type=‘share‘>：点击页面按钮分享转发

- wx.hideShareMenu()：隐藏转发按钮，关闭转发功能

- 获取更多转发信息：如转发到群获取群的标识

     a. 通过在 onLoad 和 onShow 中调用 wx.showShareMenu 并且设置 withShareTicket 为 true ；

     b. 当用户将小程序转发到任一群聊之后被其他用户打开时，可以在 App.onLaunch 或 App.onShow 获取到一个 shareTicket ;

     c. 通过调用 wx.getShareInfo() 接口传入此 shareTicket 可以获取到转发信息。

 

8、动态修改样式

a. 利用三目运算控制样式有无   <button class="{{aaa === true ? ‘buttonActive‘ : ‘‘}}">

b. JS动态修改样式   <view style="background:{{background}};"> 通过setData动态修改数据

 

9、背景图的引用 

微信小程序中不允许引入本地路径背景图 

 

解决方案： 

1、base64:引入图片 http://imgbase64.duoshitong.com/ 

2、服务器地址引入图片 background:url(‘http://192.168.31.163:8020/pr/source/img/searchLeft.png‘)

 

10、点击图片进行预览、长按转发、保存、识别图中二维码

当预览的是本地的图片时，图片不能加载，只有来自于网上或者是通过手机相册选择、拍照获取的图片才可以成功显示，并且只能扫描小程序码。

a. 小程序中的图片不能识别除小程序码以外的二维码

b. 并且仅在 wx.previewImage 中支持长按识别

     wx.previewImage({

         current: this.data.imgalist,  // 当前显示图片的http链接

          urls: this.data.imgalist  // 需要预览的图片http链接列表

     })  

 

11、在小程序中如何打开另一个小程序

第一种：<navigator target="miniProgram">

第二种：

wx.navigateToMiniProgram({   

    appId: ‘‘,  // 要打开小程序的appId 

    path: ‘page/index/index?id=123‘,  // 要打开的页面路径，如果为空则打开首页 

     extraData: {   // 需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据

        foo: ‘bar‘

     },

     envVersion: ‘develop‘, 

     success(res) { 

        // 打开成功 

     } 

})

 

注：当小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时，需要先在app.json配置文件中声明需要跳转的小程序 appId 列表，最多允许填写 10 个。

"navigateToMiniProgramAppIdList": [

    "要跳转小程序的appId"

]

 

12、webview中的页面怎么跳回小程序中 

- 首先要引入最新版的jweixin-1.3.2.js

- 调用  wx.miniProgram.navigateTo({ url: ‘/pages/login/login‘+‘$params‘ }) //小程序链接

- 小程序页面中  <web-view :src="link"></web-view>  // link为要打开的h5链接

 

13、小程序打开APP

<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>

• open-type=“launchApp” 开放能力
• app-parameter=“wechat” 传参
• binderror=“launchAppError” 失败回调

注：安卓和 ios 端需要进行相应的配置。

 

14、解析富文本编辑器

<rich-text>

其他方式参考：https://www.cnblogs.com/mcll/p/11699405.html

 

15、如何分包加载？分包加载的优势在哪？

- 开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。主包，即放置默认启动页面/TabBar 页面，以及所有分包都需用到的公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

- 目前小程序分包大小有以下限制：

• 整个小程序所有分包大小不超过 12M
• 单个分包/主包大小不能超过 2M

- 优势：对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

 

三、综合问题

1、小程序和原生app对比

小程序除了拥有公众号的低开发成本、低获客成本低以及无需下载等优势，在服务请求延时与用户使用体验是都得到了较大幅度的提升，使得其能够承载跟复杂的服务功能以及使用户获得更好的用户体验。同时解决了App长期以来多平台适配、多应用市场分发、开发成本居高不下等诸多方面的问题。

 

2、小程序优劣势

优势：

1）容易上手，只要之前有HTML+CSS+JS基础知识，写小程序基本上没有大问题；当然如果了解ES6+CSS3则完全可以编写出即精简又动感的小程序；

2）基本上不需要考虑兼容性问题，只要微信可以正常运行的机器，就可以运行小程序；

3）基本组件库已经比较齐全：Toast,Loading框,Picker,定位及地图,Image,Input,Checkbox,Text,TextArea,ScrollView等常用的组件都有，而且使用也挺简单、方便；

4）发布、审核高效，基本上上午发布审核，下午就审核通过，升级简单，而且支持灰度发布；

5 ) 微信官方提供使用人数、频率等数据统计，小程序js脚本执行错误日志；

6）开发文档比较完善，开发社区比较活跃；

7）最近刚开放的牛x功能，新增webview组件，可以展示网页啦，这个比较爽；

8）支持插件式开发，一些基本功能可以开发成插件，供多个小程序调用；

 

劣势：

1）后台调试麻烦，因为API接口必须https请求，且公网地址，也就是说后台代码必须发布到远程服务器上；当然我们可以修改host进行dns映射把远程服务器转到本地，或者开启tomcat远程调试；不管怎么说终归调试比较麻烦；

2）前台测试有诸多坑，最头疼莫过于模拟器与真机显示不一致（之前碰到一个案例，后续单独讲解）；

3）真机测试，个别功能安卓和苹果表现迥异，我们的小程序里有很多页面有定位功能，模拟器和iphone定位瞬间完成，然而安卓手机就蛋疼了，老显示“定位中...”要很久才能定位好。后来没办法只能优化，减少定位次数；

4）native组件，展示很不好，比如textarea，不能在滚动页面出现，而且至于顶层，经常其它组件会被它遮挡，点击其它组件时，就进入textarea输入框；画布组件也是如此；

5）页面跳转深度不能超过5个页面，这个比较麻烦，有些复杂的页面跳转没法实现，不过太复杂的话也有悖小程序简单易用的原则啦；

6）小程序升级问题，官方文档说会自动更新，实际情况往往是要先把原来的小程序删除掉，重新搜索添加，才能加载最新版本；

7）页面渲染稳定性有待提高，已经好几次出现部分用户的页面显示异常，整个页面被放大了好几倍，先删除原来小程序再添加回来，如此重复好几次，才能显示正常；

8）js引用只能使用绝对路径，很蛋疼；基于安全性及MINA框架实现原理，小程序中对js使用做了很多限制，不能使用：new Function，eval，Generator，不能操作cookie，不能操作DOM；

9）开发工具bug比较多且效率比较低，三天两头升级，解决老问题的同时又出现问题；文件查找、资源定位、代码编辑较eclipse有一定差距。经常出现把a.js当做b.js来修改。

 

3、原生/wepy/mpvue 框架对比

- 个人认为，如果是新项目，且没有旧的 h5 项目迁移，则考虑用小程序原生开发，好处是相比于第三方框架，坑少。

- 而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发，则比较适合 wepy 或者 mpvue 来做迁移或者开发，近期看wepy几乎不更新了，所以推荐美团的mpvue。

- 而如果如果团队前端强大，自己做一套框架也没问题。

 

4、如何提高小程序应用速度

- 提高页面加载速度：点击后跨页面预加载功能（但容易使逻辑混乱）

- 用户行为预测：不用点击直接预加载下个页面数据

- 减少默认data大小：打开一个新页面时微信会深拷贝一个Page对象

- 尽量组件化

 

5、开发小程序流程

- 微信公众平台：注册小程序，配置

- 微信开发者工具：微信扫码登录

- 前期：小程序需要公司管理员进行企业认证

- 生成体验版：

     微信公众平台 》 用户身份 》成员管理 》 编辑  》 添加成员 [微信号，体验权限打钩]

     微信开发者工具 》 上传

     微信公众平台 》 开发管理 》 开发版本 》 箭头 》将刚刚上传的小程序设置为体验版本 》 生成二维码

- 测试：使用真机调试，否则调接口容易出问题

- 上传发布审核上线：点击上传，输入相关版本号确定之后可在微信小程序后台管理处看到提交的版本。提交之后进入审核中，通过审核之后发布上线。

 

四、项目问题 

1、调用后端接口遇到什么问题

- 数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程序；

- 小程序不可以直接渲染文章内容页这类型的html文本内容，若需显示要借住插件，但插件渲染会导致页面 加载变慢，所以最好在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签，然后其它的标签让插件来做，减轻前端的时间。

 

2、开发过程中遇到什么坑

1、app.json配置文件中不能写注释；

2、在json文件中没有写内容的时候也要加一对大括号{ }，不然的话也会报错；

3、模拟访问本地接口时，需要在详情=》项目设置=》里勾选：不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书，否则报错；

4、解决 text 设置行高 line-height 无效的问题：在父级设置行高；

5、text套text，然后第二个text绑定点击事件会失效；

6、input组件获得焦点时placeholder内容有重影BUG：这是小程序input组件自身bug，可以在input组件上添加其他标签定位上去，用来显示placeholder内容，获得焦点时消失，失去焦点时显示；

7、待补充...

 

3、项目中涉及的小技能案例

日后整理到博客中...  

博客地址：https://www.cnblogs.com/pinkpinkc/

 

 

综上，一些答案参考了各路大神，忘记出处见谅...

另，错误地方欢迎指出~