小程序篇

[ArthurWangCN]

微信小程序主要目录和文件的作用

• project.config.json：项目配置文件，用的最多的就是配置是否开启https校验
• App.js：设置一些全局的基础数据等
• App.json：底部tab，标题栏和路由等设置
• App.wxss：公共样式，引入iconfont等
• pages：里面包含一个个具体的页面
• index.json：配置当前页面标题和引入组件
• index.wxml：页面结构
• index.wxss：页面样式表
• index.js：页面的逻辑，请求和数据处理

[ArthurWangCN]

wxml与标准的html的异同

• 都是用来描述页面的结构
• 都由标签，属性等构成
• 标签名字不一样，且小程序标签更少，单一标签更多
• 多了一些 wx:if 这样的属性以及{{}} 这样的表达式
• WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
• 组件封装不同，WXML对组件进行了重新封装
• 小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。

[ArthurWangCN]

WXSS和CSS的异同

• 都是用来描述页面的样子
• WXSS具有CSS大部分的特性，也做了一些扩充和修改
• WXSS新增了尺寸单位，WXSS在底层支持新的尺寸单位rpx
• WXSS仅支持部分CSS选择器
• WXSS提供全局样式与局部样式

[ArthurWangCN]

封装微信小程序的数据请求

1. 在根目录下创建util目录及api.js文件和apiConfig.js文件
2. 在apiConfig.js封装基础的get，post和put，upload等请求方法，设置请求体，带上token和异常处理等
3. 在api.js中引入apiConfig.js封装好的请求方法.根据页面数据请求的urls，设置对应的方法并导出
4. 在具体的页面中导入

[ArthurWangCN]

小程序的双向绑定和vue的异同

大体相同，但小程序之间this.data的属性是不可以同步到视图的，必须调用this.setData()方法

[ArthurWangCN]

小程序的生命周期函数

• onLoad()页面加载时触发，只会调用一次，可获取当前页面路径中的参数
• onShow()页面显示/切入前台时候触发，一般用来发送数据请求
• onReady()页面初次渲染完成时触发，只会调用一次，代表页面已可和视图层进行交互
• onHide()页面隐藏/切入后台时触发，如底部tab切换到其他页面或小程序切入后台等
• onUnload()页面卸载时触发，如redirectTO或navigateBack到其他页面时

[ArthurWangCN]

简述微信小程序原理

• 小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；
• 它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；
• 它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
• 功能可分为webview和APPService两个部分，webview主要用来展示UI，appservice用来处理业务逻辑，数据及接口调用，它们在两个进程中进行，通过系统层JSBridge实现通信，实现UI的渲染，事件处理；
• javaScript的代码是运行在微信App中的，因此一些h5技术的应用需要微信APP提供对应的API支持；
• wxml 微信自己基于xml语法开发的，因此在开发时只能使用微信提供的现有标签，html的标签是无法使用的；
• wxss具有css的大部分特性，但并不是所有都支持，没有详细文档（wxss的图片引入需要使用外链地址，没有body，样式可以使用import导入）。

[ArthurWangCN]

微信小程序的优劣势

优势：

• 容易上手，基础组件库比较全，基本不需要考虑兼容问题
• 开发文档比较完善，开发社区比较活跃，支持插件式开发
• 良好的用户体验，无需下载，通过搜索和扫一扫就可以打开，打开速度快，安卓上可以添加到桌面，与原生APP差不多
• 开发成本比APP要低
• 为用户提供良好的保障（小程序发布，严格是审查流程）

劣势：

• 限制较多，页面大小不能超过1M，不能打开超过5个层级的页面
• 样式单一，部分组件已经是成型的，样式不可修改，例如：幻灯片，导航
• 推广面窄，不能分享朋友圈，只能通过分享给朋友，附加小程序推广
• 依托与微信，无法开发后台管理功能
• 后台调试麻烦，因为api接口必须https请求且公网地址
• 真机测试，个别安卓和苹果表现迥异，例如安卓的定位功能加载很慢

[ArthurWangCN]

微信小程序和H5的区别？

• 运行环境不同（小程序在微信运行，h5在浏览器运行）
• 开发成本不同（h5需要兼容不同的浏览器）
• 获取系统权限不同（系统级权限可以和小程序无缝衔接）
• 应用在生成环境的运行速度流程（h5需不断对项目优化来提高用户体验）

[ArthurWangCN]

小程序关联微信公众号如何确定用户的唯一性

使用wx.getUserlnfo方法 withCredentials为true时，可获取encryptedData，里面有union_id，后端需要进行对称解密

[ArthurWangCN]

微信小程序如何实现下拉刷新？

用view代替scroll-view，设置onPullDownRefresh函数实现

[ArthurWangCN]

bindtap和catchtap的区别？

bind事件绑定不会阻止冒泡事件向上冒泡 catch事件绑定可以阻止冒泡事件向上冒泡

[ArthurWangCN]

小程序的发布流程（开发流程）

1. 注册微信小程序账号
2. 获取微信小程序的AppID
3. 下载微信小程序开发者工具
4. 创建demo项目
5. 去微信公众号配置域名
6. 手机浏览
7. 代码上传
8. 提交审核
9. 小程序发布

[ArthurWangCN]

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

首先，需要在你的html页面中引用一个js文件

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
//然后为你的按钮标签注册一个点击事件
$(".kaiqi").click(function(){
        wx.miniProgram.redirectTo({url: '/pages/indexTwo/indexTwo'})
});
// 这里的redirectTo跟小程序的wx.redirectTo()跳转页面是一样的，会关闭当前跳转到页面，换成navigateTo，跳转页面就不会关闭当前页面

[ArthurWangCN]

双线程模型

小程序的渲染层和逻辑层分别由2个线程管理：

• 渲染层： 界面渲染相关的任务全都在WebView里执行。一个小程序存在多个界面，所以渲染层存在多个WebView线程。
• 逻辑层：采用JsCore线程运行JS脚本。

视图层和逻辑层通过系统层的WeixinJsBridge进行通信：逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。

页面渲染的具体流程是: 在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的DOM树上，渲染出正确的UI界面。

双线程模型是小程序框架与页面大多数前端Web框架不同之处。基于这个模型，可以更好地管控以及提供更安全的环境。缺点是带来了无处不在的异步问题（任何数据传递都是线程间的通信，也就是都会有一定的延时），不过小程序在框架层面已经封装好了异步带来的时序问题。