微信手机网站建设,网络营销策划包括哪些内容,为什么大型网站都用php,渭南最新防疫信息前言 参考文档#xff1a;微信开放文档
1. 注册小程序
每个小程序都需要在 app.js 中调用 App 方法注册小程序实例#xff0c;绑定生命周期回调函数、错误监听和页面不存在监听函数等。
// app.js
App({onLaunch(options) {// Do something initial when launch.},onShow… 前言 参考文档微信开放文档
1. 注册小程序
每个小程序都需要在 app.js 中调用 App 方法注册小程序实例绑定生命周期回调函数、错误监听和页面不存在监听函数等。
// app.js
App({onLaunch(options) {// Do something initial when launch.},onShow(options) {// Do something when show.},onHide() {// Do something when hide.},onError(msg) {console.log(msg);},globalData: I am global data,
});
通过 getApp 方法获取到全局唯一的 App 实例获取 App 上的数据或函数。
// xxx.js
const appInstance getApp();
console.log(appInstance.globalData); // I am global data
2. 注册页面
初始数据、生命周期回调、事件处理函数等。
//index.js
Page({data: {text: This is page data.,},onLoad: function (options) {// 页面创建时执行},onShow: function () {// 页面出现在前台时执行},onReady: function () {// 页面首次渲染完毕时执行},onHide: function () {// 页面从前台变为后台时执行},onUnload: function () {// 页面销毁时执行},onPullDownRefresh: function () {// 触发下拉刷新时执行},onReachBottom: function () {// 页面触底时执行},onShareAppMessage: function () {// 页面被用户分享时执行},onPageScroll: function () {// 页面滚动时执行},onResize: function () {// 页面尺寸变化时执行},onTabItemTap(item) {// tab 点击时执行console.log(item.index);console.log(item.pagePath);console.log(item.text);},// 事件响应函数viewTap: function () {this.setData({text: Set some data for updating view.,},function () {// this is setData callback});},// 自由数据customData: {hi: MINA,},
});
2.1 在页面中使用 behaviors
// my-behavior.js
module.exports Behavior({data: {sharedText: This is a piece of data shared between pages.,},methods: {sharedMethod: function () {this.data.sharedText This is a piece of data shared between pages.;},},
});
// page-a.js
var myBehavior require(./my-behavior.js);
Page({behaviors: [myBehavior],onLoad: function () {this.data.sharedText This is a piece of data shared between pages.;},
});
3. 注册组件
Component 构造器的主要区别是方法需要放在 methods: { } 里面。
Component({data: {text: This is page data.,},methods: {onLoad: function (options) {// 页面创建时执行},onPullDownRefresh: function () {// 下拉刷新时执行},// 事件响应函数viewTap: function () {// ...},},
});
4. 生命周期
onReady,onHide,onShow,onUnload
5. 页面路由
框架以栈的形式维护了当前的所有页面。
打开新页面新页面入栈调用 API wx.navigateTo
页面重定向当前页面出栈新页面入栈调用 API wx.redirectTo
页面返回页面不断出栈直到目标返回页调用 API wx.navigateBack
Tab 切换页面全部出栈只留下新的 Tab 页面调用 API wx.switchTab
重加载页面全部出栈只留下新的页面调用 API wx.reLaunch
6. 模块化
// common.js
function sayHello(name) {console.log(Hello ${name} !);
}
function sayGoodbye(name) {console.log(Goodbye ${name} !);
}module.exports.sayHello sayHello;
exports.sayGoodbye sayGoodbye;
var common require(common.js);
Page({helloMINA: function () {common.sayHello(MINA);},goodbyeMINA: function () {common.sayGoodbye(MINA);},
});
7. 数据绑定
!--wxml--
view {{message}} /view
// page.js
Page({data: {message: Hello MINA!,},
});
8. 列表渲染
!--wxml--
view wx:for{{array}} {{item}} /view
// page.js
Page({data: {array: [1, 2, 3, 4, 5]}
})
9. 条件渲染
!--wxml--
view wx:if{{view WEBVIEW}} WEBVIEW /view
view wx:elif{{view APP}} APP /view
view wx:else{{view MINA}} MINA /view
// page.js
Page({data: {view: MINA}
})
10. 模板
!--wxml--
template namestaffNameviewFirstName: {{firstName}}, LastName: {{lastName}}/view
/templatetemplate isstaffName data{{...staffA}}/template
template isstaffName data{{...staffB}}/template
template isstaffName data{{...staffC}}/template
// page.js
Page({data: {staffA: {firstName: Hulk, lastName: Hu},staffB: {firstName: Shang, lastName: You},staffC: {firstName: Gideon, lastName: Lin}}
})
11. 双向绑定
input model:value{{value}} /
