一 整體結(jié)構(gòu)
圖片目錄(images)、頁(yè)面目錄(pages)、公共腳本(utils)、全局配置(app.json、project.config.json)四個(gè)大的部分構(gòu)成。
頁(yè)面目錄中，每個(gè)頁(yè)面配置完成會(huì)自動(dòng)生成4個(gè)文件(JS、JSON、WXSS、WXML)。頁(yè)面邏輯，頁(yè)面配置，頁(yè)面樣式，頁(yè)面結(jié)構(gòu)。
所有頁(yè)面需要在app.json中的pages中進(jìn)行配置注冊(cè)。
導(dǎo)航欄的菜單配置需要在app.json中的tabBar中進(jìn)行配置注冊(cè)。
全局變量需要在app.js的globalData中進(jìn)行定義，通過(guò)var app =? getApp() 調(diào)用。
公共腳本需要將定義好的function在module.exports中進(jìn)行暴露， 暴露模塊接口。
二? 左右輪播（swiper）、上下輪播
autoplay、interval、duration....自動(dòng)切換播放、播放間隔時(shí)間、播放動(dòng)畫(huà)時(shí)間。
比如banner的左右滾動(dòng)、公告的上下滾動(dòng)（設(shè)置vertical為true）。
三? 頁(yè)面跳轉(zhuǎn)、參數(shù)傳遞、接收參數(shù)
四種跳轉(zhuǎn)方式
wx.navigateTo 跳轉(zhuǎn)新頁(yè)面；
wx.switchTab 跳轉(zhuǎn)導(dǎo)航菜單頁(yè)面；
wx.redirectTo 關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)新頁(yè)面；
頁(yè)面標(biāo)簽跳轉(zhuǎn)；
參數(shù)傳遞
wx.navigateTo({
url: '../activity/news/detail?id=' + activityid
})
wx.switchTab({
url: '../../index/index'
})
wx.redirectTo({
url: '../activity/news/detail?id=' + activityid
})
接收參數(shù)
onLoad: function (options) {
var id = options.id;
}
四? 列表數(shù)據(jù)綁定
頁(yè)面部分
JS部分
wx.request({
url: app.globalData.requestUri + "/banners",
header: {
"Content-Type": "application/json"
},
method: "GET",
data: {
start: start,
maxResults: maxResults,
bannerType: bannerType
},
success: function (res) {
that.setData({
bannerList: res.data.items
})
}
})
wx.request注意點(diǎn)
method 必須大寫；
GET時(shí)"Content-Type": "application/json"；
POST時(shí)"Content-Type": "application/x-www-form-urlencoded"
點(diǎn)擊事件、傳遞參數(shù)
使用bindtap綁定方法。參數(shù)用data-*的形式傳遞。記得全部小寫。默認(rèn)會(huì)放在dataset中。
openActivity: function (event) {
var params = event.currentTarget.dataset;
//dataset中多個(gè)單詞由連字符-鏈接，不能有大寫(大寫會(huì)自動(dòng)轉(zhuǎn)成小寫)
//底部菜單要使用wx.switchTab 來(lái)跳轉(zhuǎn)界面
var type = params.type;
var activityType = params.activitytype;
var relativeId = params.relativeid;
}
五? 詳情數(shù)據(jù)綁定
js部分代碼
onLoad: function (options) {
var id = options.id;
var that = this;
wx.request({
url: app.globalData.requestUri + "/infos/" + id,
header: {
"Content-Type": "application/json"
},
method: "GET",
success: function (res) {
that.setData({
news: res.data,
imgurl: app.globalData.domain + res.data.imgurl,
publishTime: util.formatTime1(res.data.publishTime,'Y-M-D h:m:s')
})
}
})
}
頁(yè)面部分代碼
{{news.title}}
{{publishTime}}
頁(yè)面引用公用js
var util = require("../../../utils/util.js");
var app = getApp();
六? 上拉刷新、下拉加載
上拉刷新
onPullDownRefresh: function () {
var that = this;
//下拉刷新，將pageNumber和pageSize分別設(shè)置成0和10，并初始化數(shù)據(jù)，讓數(shù)據(jù)重新通過(guò)loadRoom()獲取
that.setData({
start: 0,
maxResults: 10,
infoList: []
})
that.loadRooms();
wx.stopPullDownRefresh();
}
下拉加載
onReachBottom: function () {
//上拉分頁(yè),將頁(yè)碼加1，然后調(diào)用分頁(yè)函數(shù)
var that = this;
var start = that.data.start;
that.setData({
start: ++start
});
setTimeout(function () {
wx.showToast({
title: '加載中..',
}),
that.loadRooms();
}, 1000)
}
需要在json中配置啟用下拉事件
{
"enablePullDownRefresh": true
}
七? 表單提交
表單提交注意點(diǎn)
bindsubmit表單提交事件；
bindinput輸入框監(jiān)控事件；
獲得表單提交數(shù)據(jù)
formSubmit: function (e) {
? ? //獲得表單數(shù)據(jù)
? ? var objData = e.detail.value;
? ? var password = objData.password;
? ? var mobile = objData.mobile;
? ? var code = objData.code;
}
八? 緩存數(shù)據(jù)讀取
緩存寫入
wx.setStorageSync('password', password);
wx.setStorageSync('mobile', mobile);
緩存讀取、移除、清除所有
var mobile = wx.getStorageSync('mobile');
wx.removeStorageSync('mobile');
wx.clearStorage();
九? 提示信息，彈出框
提示信息和彈框，有icon時(shí)最多顯示7個(gè)字，icon為none時(shí)可顯示全部信息。
wx.showToast({
title: '登錄成功',
success: function () {
setTimeout(function () {
//要延時(shí)執(zhí)行的代碼
//跳轉(zhuǎn)到成功頁(yè)面
wx.switchTab({
url: '../index/index'
})
}, 2000) //延遲時(shí)間
}
})
模態(tài)框，確認(rèn)取消對(duì)話框
wx.showModal({
title: '確認(rèn)',
content: '確認(rèn)提交訂單',
success: function (res) {
if (res.confirm) {
console.log('確定')
}else{
console.log(取消')
}
}
})
十? 分享
分享，imageUrl非必填
onShareAppMessage: function () {
return {
title: '金算子',
desc: '新聞資訊',
imageUrl: '../../images/home/home-add-01.png',
path: '../activity/news/detail',
success: function (res) {
},
fail: function () {
}
}
}
十一? 打電話
打電話調(diào)用wx.makePhoneCall
phoneCall: function (mpbile) {
wx.makePhoneCall({
phoneNumber: "13724201432"
})
}
