微信小程序笔记篇

优点

一、无需下载，经过搜索和扫一扫就能够打开。
二、良好的用户体验：打开速度快。
三、开发成本要比App要低。
四、安卓上能够添加到桌面，与原生App差很少。
五、为用户提供良好的安全保障。小程序的发布：微信拥有一套严格的审查流程，不能经过审查的小程序是没法发布到线上的。javascript

劣势

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

文件结构

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

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

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

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

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

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

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倍数关系，如iPhone六、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.在具体的页面中导入；

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

一、提升页面加载速度
二、用户行为预测
三、减小默认data的大小
四、组件化方案

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

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