// JS管理页面状态
this.setData({msg:"hello world"})
// wxml
<text>{{msg}}</text>
// app.wxss全局样式
// page.wxss局部样式
// JS逻辑交互
<view>{{msg}}</view>
<button bindtap="clickMe">点击我</button>
// 在js文件里边声明了ClickMe方法来响应这次点击操作
Page({
clickMe: function() {
this.setData({
msg: "Hello World"
})
}
})
// 程序与页面
// 微信客户端在打开小程序之前，会把整个小程序的代码下载到本地
// 紧接着通过app.json的pages字段就可以知道当前小程序的所有页面路径：
{
"pages": [
"pages/index/index",
"pages/logs/logs"
]
}
// 写在pages字段的第一个页面就是这个小程序的首页
// 于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。
// 小程序在启动后，在app.js定义的App实例的onLaunch回调会被执行：
App({
onLaunch: function(options) {
// 小程序启动之后 触发
},
onShow(options) {
// Do something when show
},
onHide() {
// Do something when hide
// 页面不存在
},
onError(msg) {
console.log(msg)
},
globalData: 'I am global data'
})
// 整个小程序只有一个App实例，是全部页面共享的。开发者可以通过getApp方法获取到全局唯一的App实例，获取App上的数据或调用开发者注册在App上的函数。
const appInstance = getApp()
console.log(appInstance.globalData)
// Page是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把data数据和index.html一起渲染出最终的结构，于是就得到了你看到的小程序的样子。
// 在渲染完界面之后，页面实例就会收到一个onLoad的回调，你可以在这个回调处理你的逻辑。
Page({
data: {
// 参与页面渲染的数据
logs: []
},
onLoad: function() {
// 页面渲染后 执行
},
onReady: function() {
},
onShow: function() {
},
onHide: function() {
},
onUnload: function() {
},
onPullDownRefresh: function() {
},
onReachBottom: function() {
},
onShareAppMessage: function() {
},
onPageScroll: function() {
},
onResize: function() {
},
onTabItemTap(item) {
},
viewTap: function() {
this.setData({
text: 'Set some data for updating view'
},function(){
// this is setData callback
})
},
customData: {
hi: 'MINA'
}
})
// Component构造器可用于定义组件，调用Component构造器可以指定组件的属性、数据、方法等。
Component({
behaviors: [],
properties: {
myProperty: {
type: String,
value: ''
},
// 简化的定义方式
myProperty2: String
},
data: {
// 私有数据，可用于模板渲染
},
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
},
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
ready: function() { },
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () { },
hide: function () { },
resize: function () { },
},
methods: {
onMyButtonTap: function(){
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
})
},
// 内部方法建议以下划线开头
_myPrivateMethod: function(){
// 这里将 data.A[0].B 设为 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
},
_propertyChange: function(newVal, oldVal) {
}
}
})
// 代码示例
{
"usingComponents": {}
}
Component({
properties: {
paramA: Number,
paramB: String,
},
methods: {
// 页面参数paramA的值
this.data.paramA,
this.data.paramB
}
})
扫一扫
4179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
