框架语法对比
小程序使用对比
微信小程序
project.config.json -- 小程序项目配置文件：比如构建方式（es6、postcss等）、appid、项目名称等
app.json -- app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
/** 文件内容示例
* {
* "pages":[ // 路径
* "pages/index/index",
* "pages/logs/logs"
* ],
* "window":{
* "backgroundTextStyle":"light",
* "navigationBarBackgroundColor": "#fff",
* "navigationBarTitleText": "WeChat",
* "navigationBarTextStyle":"black"
* },
* "tabBar": {
* "color": "#999999",
* "selectedColor": "#000000",
* "backgroundColor": "#ffffff",
* "list": [
* {
* "pagePath": "pages/index/index",
* "text": "信息流",
* "iconPath": "/static/feedUnselected.png",
* "selectedIconPath": "/static/feed.png"
* }
* ]
* }
* }
*/
app.js -- 小程序入口，调用App()函数注册小程序
/** 文件内容示例
* App({
* onLaunch: function () { } // 监听小程序初始化，全局只触发一次
* })
*/
app.wxss -- wxss 在css上面扩充了一个自适应单位 rpx，整个屏幕宽度为750rpx；扩展了 @import "common.wxss"; 方法可引入wxss文件
/pages
/index -- 页面目录，这就比较随意了，直接放在pages下面也是阔以的；一个小程序页面包含 js/wxml/wxss/json 四个文件
index.js -- 在其中调用Page()方法初始化页面
/** 文件内容示例
* Page({
* data: { -- data 是页面第一次渲染使用的初始数据。
* list: [] -- 在wxml中可使用 {{ list }} 来获取
* },
* onLoad: function (query) { -- 页面加载时触发。一个页面只会调用一次，可通过query对象获取传递过来的参数
* wx.showToast({
* title: '鹊桥测试',
* icon: 'none',
* duration: 1000
* });
* },
* categoryChange: function(event) {
* this.setData({
* noIndex: event.detail.value
* });
* }
* })
*/
index.wxml -- 自定义的一套页面模板
index.wxss
index.json -- 页面配置
/** 文件内容示例
* {
* "navigationBarTitleText": "自定义导航标题",
* "usingComponents": { // 自定义组件
* "Content": "/pages/index/components/content"
* }
* }
/log
/utils
utils.js
自定义组件
微信小程序中的自定义组件也需要包含 js、wxml、wxcss【非必须】、json【非必须】四部分，JS 中需要调用 Component()方法进行初始化，例如：
// pages/index/components/content.js
Component({
properties: { -- 对外暴露的参数
content: { -- 每个参数包含type：类型，value：初始值，observer：值变化时响应函数三部分
type: Object,
observer: function (newVal, oldVal, changedPath) {
console.log(newVal);
this.setData({
content: newVal
});
}
},
config: { -- 暴露的参数在wxml中可以通过 {{content}} 来获取
type: Object,
observer: function (newVal, oldVal, changedPath) {
this.setData({
config: newVal
});
}
}
},
data: {} -- 组件内部数据 data,
methods: {} -- 组件中的方法
})
自小程序基础库版本 2.2.3 版本开始，组件的的生命周期也可以在 lifetimes 字段中定义，且优先级最高。
- created 组件实例刚刚被创建时执行，此时不能调用 setData
- attached 在组件实例进入页面节点树时执行
- ready 在组件布局完成后执行
- moved 在组件实例被移动到节点树另一个位置时执行
- detached 在组件实例被从页面节点树移除时执行
在组件中可通过 pageLifetimes 来定义页面生命周期触发时组件的行为：
- show 组件所在的页面被展示时执行
- hide 组件所在的页面被隐藏时执行
- resize 组件所在的页面尺寸变化时执行，会传入 size
将组件传入自定义组件作为子组件，在 wxml 中提供了 slot 组件来替代传入的子组件（对应 react 中的 this.props.children），如果有多个 slot，则需要在组件的配置文件中 options 字段中开启 multipleSlots 为 true。
淘宝小程序
app.json -- app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
/** 文件内容示例
* {
* "pages":[ // 路径
* "pages/index/index",
* "pages/logs/logs"
* ],
* "window":{
* "backgroundTextStyle":"light",
* "navigationBarBackgroundColor": "#fff",
* "navigationBarTitleText": "WeChat",
* "navigationBarTextStyle":"black"
* },
* "tabBar": {
* "color": "#999999",
* "selectedColor": "#000000",
* "backgroundColor": "#ffffff",
* "list": [
* {
* "pagePath": "pages/index/index",
* "text": "信息流",
* "iconPath": "/static/feedUnselected.png",
* "selectedIconPath": "/static/feed.png"
* }
* ]
* }
* }
*/
app.js -- 小程序入口，调用App()函数注册小程序
/** 文件内容示例
* App({
* onLaunch: function () { } // 监听小程序初始化，全局只触发一次
* })
*/
app.acss -- acss 在css上面扩充了一个自适应单位 rpx，整个屏幕宽度为750rpx；
/pages
/index -- 页面目录，这就比较随意了，直接放在pages下面也是阔以的；一个小程序页面包含 js/axml/acss/json 四个文件
index.js -- 在其中调用Page()方法初始化页面
/** 文件内容示例
* Page({
* data: { -- data 是页面第一次渲染使用的初始数据。
* list: [] -- 在axml中可使用 {{ list }} 来获取
* },
* categoryChange: function(event) {
* this.setData({
* noIndex: event.detail.value
* });
* }
* })
*/
index.axml -- 自定义的一套页面模板
index.acss
index.json -- 页面配置
/** 文件内容示例
* {
* "navigationBarTitleText": "自定义导航标题",
* "usingComponents": { // 自定义组件
* "Content": "/pages/index/components/content"
* }
* }
支付宝小程序
app.json -- app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
/** 文件内容示例
* {
* "pages":[ // 路径
* "pages/index/index",
* "pages/logs/logs"
* ],
* "window":{
* "backgroundTextStyle":"light",
* "navigationBarBackgroundColor": "#fff",
* "navigationBarTitleText": "WeChat",
* "navigationBarTextStyle":"black"
* },
* "tabBar": {
* "color": "#999999",
* "selectedColor": "#000000",
* "backgroundColor": "#ffffff",
* "list": [
* {
* "pagePath": "pages/index/index",
* "text": "信息流",
* "iconPath": "/static/feedUnselected.png",
* "selectedIconPath": "/static/feed.png"
* }
* ]
* }
* }
*/
app.js -- 小程序入口，调用App()函数注册小程序
/** 文件内容示例
* App({
* onLaunch: function () { } // 监听小程序初始化，全局只触发一次
* })
*/
app.acss -- acss 在css上面扩充了一个自适应单位 rpx，整个屏幕宽度为750rpx；
/pages
/index -- 页面目录，这就比较随意了，直接放在pages下面也是阔以的；一个小程序页面包含 js/axml/acss/json 四个文件
index.js -- 在其中调用Page()方法初始化页面
/** 文件内容示例
* Page({
* data: { -- data 是页面第一次渲染使用的初始数据。
* list: [] -- 在axml中可使用 {{ list }} 来获取
* },
* categoryChange: function(event) {
* this.setData({
* noIndex: event.detail.value
* });
* }
* })
*/
index.axml -- 自定义的一套页面模板
index.acss
index.json -- 页面配置
/** 文件内容示例
* {
* "navigationBarTitleText": "自定义导航标题",
* "usingComponents": { // 自定义组件
* "Content": "/pages/index/components/content"
* }
* }
自定义组件
支付宝小程序中的自定义组件也需要包含 js、axml、acss【非必须】、json【非必须】四部分，JS 中需要调用 Component()方法进行初始化，例如：
// pages/index/components/content.js
Component({
mixins: [{ didMount() {} }],
data: { y: 2 },
props: { x: 1 },
didUpdate(prevProps, prevData) {},
didUnmount() {},
methods: {
onMyClick(ev) {
my.alert({});
this.props.onXX({ ...ev, e2: 1 });
}
}
});
自定义的组件的生命周期：
- didMount 首次被渲染，通常在这时请求服务端数据
- didUpdate 组件被更新，一般是组件数据变更
- didUnmount 自定义组件被卸载