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

一、基本问题

1、生命周期

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、小程序和原生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/

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

另，错误地方欢迎指出~