小程序于普通网页开发的区别
- 网页的渲染线程和脚本线程是互斥的，分别运行在不同的线程；
- 小程序缺少DOM API和BOMAPI；
- js 逻辑层运行在JSCore中，与Node环境也不相同；
- 微信客户端给小程序提供宿主环境；
小程序的渲染层逻辑层如下图：
开发语言和工具
WXML 展示层
小程序的展示层；类似于HTML，但却有很大的不同；
1、名字不一样，WXML 有自己的一套标签：view, button, text 等；还包装了地图，音频等组件功能，更多的产看微信小程序组件
2、多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式；类似于MVVM的开发模式（例如 React、Vue）;例如数据绑定，列表渲染等；
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
WXSS 样式
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改
1、新增了尺寸单位 rpx，进行各种不同的屏幕的适配；
2、提供了全局的样式和局部样式；app.wxss 全局样式文件；
3、WXSS 仅支持部分 CSS 选择器；
JS逻辑交互
响应用户的点击、获取用户的位置等等，但要注意，此环境非Webview 也非Nodejs环境；
例如：
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
开发工具
采用官方提供的微信小程序开发者工具，可以完成小程序的开发、调试、代码查看、预览、发布等功能。
项目开发
入口文件
小程序主要包含以下三个入口文件：
1、app.js 整个小程序的入口文件；主要做一些网络检测，用户信息获取等；其他页面中调用app.js 中的方法时，不需要require，活着import；
2、app.json 可以对小程序进行全局配置，决定页面文件的路径，网络超时等；
3、app.wxss 小程序的公共样式表；
生命周期
微信小程序和其他前端框架类似也是有生命周期;
Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 生命周期函数--监听页面加载（像首页数据请求可以放在这里）
*/
onLoad: function (options) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作（这里添加了下拉刷新的功能）
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
})
网络请求
小程序只可以跟指定的域名进行网络通信。所以域名需要在开发设置中进行配置。需要注意：
- 域名只支持 https 协议；
- 域名不能使用IP地址或者localhost（小程序局域网IP除外）；
- 域名必须经过ICP备案；
当我们在开发环境中，调试时，可能本地没有https 域名，我们可以小程序开发环境中把，域名校验关掉。
接下来我们看一下如何发送一个网络请求：
wx.request({
url: 'test.php', //示例
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
页面间传值
1、通过导航组件 navigator 跳转通过url 传参；
<view class="btn-area">
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
</view>
在新页面通过options 获取：
Page({
onLoad: function(options) {
console.log(options.title);
}
})
2、通过路由跳转：wx.navigateTo（{}）;
wx.navigateTo({
url: 'test?id=1',
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
// test.js
Page({
onLoad: function(option){
console.log(option.query)
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
eventChannel.emit('someEvent', {data: 'test'});
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data);
})
}
})
所以通过，自定义事件，可以实现页面的双向传递数据。
自定义组件
组件模版的写法与页面模版相同，包含 json,wxml,wxss,js 四个文件，首先需要在json 文件中申明：
{
"component":true
}
模版写法也没有什么区别，例如：
<view class="inner">
{{innerText}}
</view>
<slot></slot>
自定义组件的使用
首先在页面的json 文件中进行引用声明。
{
"usingComponents": {
"component-tag-name": "path/to/the/custom/component"
}
}
接着就可以在页面的wxml 中使用了：
<view>
<!-- 以下是对一个自定义组件的引用 -->
<component-tag-name inner-text="Some text"></component-tag-name>
</view>
组件的生命周期：
Component({
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
// ...
})
小程序，更多的功能时提供了微信相关的功能，比如说，调用相机，调取二维码，地图等功能，此篇文章只是简单的入门，更多的API 还需要查看官网文档，有详细的介绍。
小程序的云开发 功能也是一个特别牛的功能，前端人员可以完成整个项目的部署，不需要买域名，不需要，运维部署。功能非常强大，后期我们详细介绍。
欢迎大家，点赞关注。
