一、基础知识
1.微信小程序适合做简单的,用完即走的应用;
2.小程序适合做低频的应用;
3.小程序适合要求不高的应用;
4.不适合用小程序的应用:知乎(社区类),YY直播(直播类),阴阳师(手游类);
适合用小程序的应用:饿了么(订餐类),猫眼(电影订票);
5.
6.学习小程序的基础:JavaScript、ES6、css;
7.小程序开发环境以及开发工具:
开发工具下载地址:http://t.cn/rvkhohs;
8.小程序开发要及时看开发文档;
9.没有小程序号的限制:
a、不能上传和发布小程序;
b、不能真机运行,只能在PC上模拟运行;
c、录音、网络状态、罗盘、拨打电话等功能不能实现;
d、获取的信息是模拟的;
二、进阶
1.小程序中只有四种文件:
.js -------- 脚本文件:页面的交互逻辑均在此页面中进行
json ------ 配置文件:用于设置程序的配置效果
.wxml ---- 页面结构文件:书写控件,构建页面
wxss ----- 样式文件:类似于css样式,用于美化页面
2.以下三个文件比较重要,作下解释
app.js
app.json
app.wxss
app.js
每个小程序工程中,有且仅有一个app.js文件,用于处理程序的生命周期等,位于项目的根目录下。
生命周期函数主要有:
onLaunch: function () {
//监听小程序初始化-小程序初始化完成时,会触发,且只会触发一次。
},
onShow: function () {
//监听小程序显示-小程序启动或从后台进入前台,会触发。
},
onHide: function () {
//监听小程序隐藏-小程序从前台进入后台,会触发。
},
app.json
使用app.json对程序进行全局配置,如:文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
{
"pages": [
"pages/index/index"//可以在这里写上路径,可自动生成页面文件。
],
"window": {
"navigationBarTitleText": "Demo"//可设置窗体的背景颜色等。
},
"tabBar": {//底部tabBar
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/tab_income.png",//设置图片
"selectedIconPath": "images/tab_income_selected.png"//选中后的图片
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
app.wxss
和css样式很相似,多了两个特性
尺寸单位: 主要用rpx,可以根据屏幕宽度进行自适应
样式导入:使用@import可引入外联样式表,句尾用分号隔开
如:@import "common.wxss";
3.微信小程序API:https://developers.weixin.qq.com/miniprogram/dev/api/;
4.wxml是编写小程序骨架的文件;
5.*.json文件尽量不要加注释,容易出错;
6.框架
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
框架提供了自己的视图层描述语言 WXML
和 WXSS
,以及基于 JavaScript
的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。
7.工具配置 project.config.json
通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。
考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json
,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。