微信小程序学习笔记（一）

微信小程序笔记篇

优势

1、无需下载，通过搜索和扫一扫就可以打开。
2、良好的用户体验：打开速度快。
3、开发成本要比App要低。
4、安卓上可以添加到桌面，与原生App差不多。
5、为用户提供良好的安全保障。小程序的发布：微信拥有一套严格的审查流程，不能通过审查的小程序是无法发布到线上的。

劣势

1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。
2、样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。
3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。
4、依托于微信，无法开发后台管理功能。

文件结构

pages文件夹： 书写各个页面代码以及组件。内部js文件书写js ; wxml文件为HTML ; wxss文件为css样式 ； json文件为配置当前页面的默认项，如title等

utils文件夹： 书写作用在全局的js共用方法等

app.js文件： 全局js配置文件，这里定义的变量为全局变量，可在页面内通过 getApp() 获取

app.json文件： 全局默认配置项，如路由、小程序的状态栏、导航条、标题、窗口背景色。

app.wxss文件： 全局css样式文件

project.config.json 项目配置文件，用得最多的就是配置是否开启https校验；

index.json (配置当前页面标题和引入组件等)；

index.wxml (页面结构)；

index.wxss (页面样式表)；

index.js (页面的逻辑，请求和数据处理等)；

移动设备的分辨率与rpx

在小程序中，一般使用iPhone6的设计稿，iPhone6下 1px = 1rpx = 0.5pt

使用rpx，小程序会自动在不同的分辨率下进行转换，简单理解为我们适配屏幕的rem

pt 也称为逻辑分辨率，pt的大小和屏幕尺寸有关系，简单可以理解为长度和视觉单位

px 指物理分辨率，和屏幕尺寸没有关系，表示一个点

一个pt 可以由1个px构成，也可以是2个、3个。这个就是移动设备屏幕上的Reader倍数关系，如iPhone6、iPhone5的 @2x ; iPhone6 Plus的 @3x

iPhone6 上的一个pt就由2个px点构成，我们的设计稿一般是以px值进行设

配置文件

"pages": [//设置页面的路径
 "pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合
"pages/logs/logs" 
],
 "window": { //设置默认窗口的表现形式
"navigationBarBackgroundColor": "#ffffff",//顶部导航栏背景色
 "navigationBarTextStyle": "black",//顶部导航文字的颜色 black/white
 "navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字
"backgroundColor": "#eeeeee", //窗口的背景色
"backgroundTextStyle": "light", //下拉背景字体、loading 图的样式，仅支持 dark/light
"enablePullDownRefresh":"false"，//是否支持下拉刷新 ，不支持的话就直接不写！
"disableScroll":true,//  设置true不能上下滚动，true/false，注意！只能在page.json中有效，无法在app.json中设置该项。
}, 
"tabBar": { //底部tab或者顶部tab的表现，是个数组，最少配置2个，最多5个
"list": [{//设置tab的属性，最少2个，最多5个
 "pagePath": "pages/index/index",//点击底部tab跳转的路径
 "text": "首页",//tab按钮上的文字
"iconPath":"../img/a.png",//tab图片的路径
  "selectedIconPath": "../img/a.png"//tab在当前页，也就是选中状态的路径
 },   { 
"pagePath": "pages/logs/logs",
 "text": "日志"
 }] ，
"color":"red",//tab的字体颜色
    "selectedColor":"#673ab7",//当前页tab的颜色，也就是选中页的
    "backgroundColor":"#2196f3",//tab的背景色
    "borderStyle":"white",//边框的颜色 black/white
    "position":"bottom"//tab处于窗口的位置 top/bottom
},
 "networkTimeout": {//默认都是60000秒一分钟
 "request": 10000,//请求网络超时时间10000秒
 "downloadFile": 10000，//链接服务器超时时间10000秒
"uploadFile":"10000",//上传图片10000秒
"downloadFile":"10000"//下载图片超时时间10000秒
 }, 
"debug": true//项目上线后，建议关闭此项，或者不写此项
}

小程序的双向绑定和vue哪里不一样？

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

this.setData({
	noBind:true
})

wxml与标准的html的异同

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

小程序的生命周期函数

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

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

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

使用哪些方法，来提高微信小程序的应用速度

1、提高页面加载速度
2、用户行为预测
3、减少默认data的大小
4、组件化方案

小程序调用后台接口遇到哪些问题

1.数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程序；
2.小程序不可以直接渲染文章内容页这类型的html文本内容，若需显示要借助插件，但插件渲染会导致页面加载变慢，所以最好在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签，然后其它的标签让插件来做，减轻前端的时间。