小程序是2016年9月进行内测的，2017年1月9日，第一批小程序正式上线
我最早是在2017年年中时接触小程序，后来中间大约三年的时间都没有再开发过小程序，这次开发咱们心理派小程序才发现小程序已经很丰富了，可以使用很多的插件，还有了npm构建工具，也是边写程序边学习关于小程序新的知识。
一、新建小程序
下载微信开发者工具
1、AppID ： 申请注册后会生成一个appid，想快速体验可以先用测试号，回头申请后直接修改appid就行。
2、后端服务：云开发和非云开发
区别：
①云开发， 开发者自己不需要本地配置服务器和数据库、存储、云函数等基础能力，直接在微信官方提供的服务器端操作就行了
②普通的开发，是需要自己准备服务器和数据库、存储、云函数等。
云开发和传统开发的区别.png
但是这里选择使用了测试号就没有云开发的选项了。
模板选择：选择JavaScript基础模板。
可以看到项目里边生成了不同类型的文件：
-
.json后缀的JSON配置文件 -
.wxml后缀的WXML模板文件 -
.wxss后缀的WXSS样式文件 -
.js后缀的JS脚本逻辑文件
接下来我们分别看看这4种文件的作用。
1、JSON 配置
可以看到根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json。
1.1 小程序配置 app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。刚才快速创建的项目里的 app.json 配置内容如下：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
}
}
其他配置项细节可以参考文档 小程序的配置 app.json 。
1.2 工具配置 project.config.json
简单来说就是，你配置了这里，当你换个重新安装开发者工具或者换个电脑，只要载入这个项目的代码，会自动恢复到你之前的个性化配置，比如编辑器的颜色、界面等等
其他配置项细节可以参考文档 开发者工具的配置 。
1.3 页面配置 page.json
用来单独配置某个页面的，比如你在app.js里配置了导航栏颜色是白色，这是全局的，而你某个页面需要导航栏显示蓝色，就可以在这个json文件里配置
其他配置项细节可以参考文档 页面配置 。
2、WXML 模板
WXML和HTML 非常相似，但也有很多不一样的地方
①标签，HTML里常用的标签是div、span，WXML里主要用的view、text，没有div、span的存在了，当然WXML也有很多其他的标签，跟html有些大同小异。
②多了一些表达式，类似vue，比如 wx:if 和 {{ }}
| 表达式 | 表达式 | 表达式 | |
|---|---|---|---|
| vue | v-if="xxx" | v-for="(item,index) in list" | :class |
| wxml | wx:if="{{xxx}}" | wx:for="{{list}}" | class="{{xxx}}" |
还有一些类似的区别写法，写的时候发现不能运行，可以首先检查一下是不是用了vue的写法。
3、WXSS 样式
具有 CSS 大部分的特性，做了一些扩充和修改
1、新增了尺寸单位rpx，小程序底层来换算，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
2、提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同， app.wxss 是全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3、此外 WXSS 仅支持部分 CSS 选择器
更详细的文档可以参考 WXSS 。
4、js交互
整体来说跟vue差不多，说几个有点小区别的地方
// 1、设置属性
// vue
this.xxx = xxx;
// 小程序里
this.setData({
xx:xx
})
// 2、获取属性
// vue
this.xxx;
// 小程序里
this.data.xxx
// 3、方法
// vue里 xie在methods里
// 小程序里 直接写在跟生命周期函数同等级的地方
4、生命周期
4.1 小程序的生命周期，在app.js里调用
onLaunch： 小程序初始化完成时触发，全局只触发一次。
onShow ：小程序启动，或从后台进入前台显示时触发。
onHide ：小程序从前台进入后台时触发。
onError ：小程序发生脚本错误或 API 调用报错时触发。
onPageNotFound： 小程序要打开的页面不存在时触发。
onUnhandledRejection： 小程序有未处理的 Promise 拒绝时触发
onThemeChange ：系统切换主题时触发。
4.2 页面的生命周期
onLoad：生命周期回调—监听页面加载
onShow： 生命周期回调—监听页面显示
onReady：生命周期回调—监听页面初次渲染完成
onHide： 生命周期回调—监听页面隐藏
onUnload：生命周期回调—监听页面卸载
4.3 组件的生命周期
created：生命周期回调—监听页面加载
attached： 生命周期回调—监听页面显示
ready：生命周期回调—监听页面初次渲染完成
moved：生命周期回调—监听页面隐藏
detached： 生命周期回调—监听页面卸载
error：每当组件方法抛出错误时执行
show： 组件所在的页面被展示时执行
hide：组件所在的页面被隐藏时执行
新建小程序页面可以在app.json里pages里直接写入 比如
"pages/login/index"
这样就会自动在pages里创建一个名字是login的文件夹，并且文件夹里自动创建了index.wxml、index.wxss、index.json、index.js
二、wxs
wxs不是wxss，wxs（WeXin Script）是小程序的一套脚本语言，结合wxml，可以构建出页面的结构
wxs也不是JavaScript，它有自己的语法。
使用场景：
测评量表做题页，一个问题有N个选项，需求是显示
A 没有或很少
B 小部分时间
C 相当多时间
D 绝大部分或者全部时间
接口没有返回 ABCD，我们需要将数组的index转成ABCD
这种在vue中是很简单的一个转换，methods里写个方法，或者用computed实现，但是小程序里没有computed的存在（我后来查了一下，可以用npm安装 npm install --save miniprogram-computed），也不支持在wxml里写{{ formatFn(index) }}
这时候用wxs就比较方便了，直接看使用示例
新建一个filter.wxs 文件
var filterLetters = function (i) {
var letter = {
'0': "A",
'1': "B",
'2': "C",
'3': "D",
};
return letter[i.toString()];
};
module.exports = {
filterLetters: filterLetters
};
在wxml文件里写入
<wxs src="/utils/filters.wxs" module="filter" />
{{filter.filterLetters(index)}}
wxs的用处还有很多，我开发时只用到了这一处，更多使用可以查看 wxs 。
三、构建npm
构建npm，每安装一个第三方库都需要点击一下 '工具' --- '构建 npm';
3.1 拿我使用的一个UI框架示例，vant weapp，就是vant 框架的小程序版
// 安装命令，在与 app.json 同级下安装;
cnpm i @vant/weapp -S --production
使用每一个vant组件都需要在对应的json里引入，例如
"van-sticky": "@vant/weapp/sticky/index",
全局使用的 vant 组件放在 app.json 里.
3.2 安装less，不知道为啥不可以npm安装，最后我是在网上看别人安装的步骤实现的。
// 在 vscode 的插件里安装插件 Easy less;
// 找到 easy less 包的目录，目标文件夹是 **mrcrowl.easy-less-1.7.3**;
// **mac** 是在 ~/.vscode/extensions 下(在终端 cd ~/.vscode/extensions，然后输入 open. 回车 )；
// **windows** 是在 C:\Users\用户名.vscode\extensions 下；
// 将目标文件拷贝到微信开发者工具里
// 设置>扩展设置>扩展>自定义扩展
// 点击，“打开扩展文件夹”，然后会打开一个文件夹，粘贴到这里就行了。
// 打开微信开发者工具 -- 设置 -- 编辑器设置 -- 拉到最下面，点击更多编辑器设置 --
// 搜索 easy less -- 点击在 setting.json 中编辑 -- 在 less.compile 中加入 "outExt": ".wxss"，
// 重启微信开发者工具，在 pages 的页面里新建一个 index.less 文件，写入并保存，会自动生成一个 index.wxss 文件
四、组件
最早小程序是不支持组件的，从小基础库版本 1.6.3 开始支持。
网友评论