微信小程序笔记篇
优势
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标签,然后其它的标签让插件来做,减轻前端的时间。