创建小程序
- 1、下载小程序调试工具
- 2、注册账号，得到appid
- 3、通过工具创建小程序
小程序demo介绍
- pages //存放页面的文件夹
- index // index页面
- logs // logs页面
- utils // 存放小的单元模块
- app.js
- app.json // 配置路由，window变量等，也可每个页面单独配置，但是只能配置window，且覆盖window
- app.wxss // 存放样式
- project.config.json // wx相关配置
语法
Mustache语法
参考：https://www.jianshu.com/p/a4eee37b2849
跟vue中的语法类似，只用过react的童鞋可以理解为弱化版的jsx
关于app()
App({
onLaunch: function(options) { // 相当于willmount
// Do something initial when launch.
},
onShow: function(options) { // 相当于didmount
// Do something when show.
},
onHide: function() { // 切入后台，不相当于unmount
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
},
globalData: 'I am global data'
})
onLaunch、onShow生命周期可以拿到场景值
- App() 必须在 app.js 中注册，且不能注册多个。
- 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
- 不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
- 通过 getApp() 获取实例之后，不要私自调用生命周期函数。
关于page()
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
onPageScroll: function() {
// Do something when page scroll
},
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
customData: {
hi: 'MINA'
}
})
提供了数据存放、生命周期和一些侦听事件
关于模板
wx提供了模板的引用方法，也就是说模板是可以重复使用的，import的写法可以定义作用域
关于自定义组件
wx提供了自定义组件的方法，在子组件中component:ture,父组件中useComponent引入子组件
slot相当于children，用name加以区分
