一 整体结构
图片目录(images)、页面目录(pages)、公共脚本(utils)、全局配置(app.json、project.config.json)四个大的部分构成。
页面目录中，每个页面配置完成会自动生成4个文件(JS、JSON、WXSS、WXML)。页面逻辑，页面配置，页面样式，页面结构。
所有页面需要在app.json中的pages中进行配置注册。
导航栏的菜单配置需要在app.json中的tabBar中进行配置注册。
全局变量需要在app.js的globalData中进行定义，通过var app = getApp() 调用。
公共脚本需要将定义好的function在module.exports中进行暴露， 暴露模块接口。
二 左右轮播（swiper）、上下轮播
autoplay、interval、duration....自动切换播放、播放间隔时间、播放动画时间。
比如banner的左右滚动、公告的上下滚动（设置vertical为true）。
三 页面跳转、参数传递、接收参数
四种跳转方式
wx.navigateTo 跳转新页面；
wx.switchTab 跳转导航菜单页面；
wx.redirectTo 关闭当前页面，跳转新页面；
页面标签跳转；
参数传递
wx.navigateTo({
url: '../activity/news/detail?id=' + activityid
})
wx.switchTab({
url: '../../index/index'
})
wx.redirectTo({
url: '../activity/news/detail?id=' + activityid
})
接收参数
onLoad: function (options) {
var id = options.id;
}
四 列表数据绑定
页面部分
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注意点
method 必须大写；
GET时"Content-Type": "application/json"；
POST时"Content-Type": "application/x-www-form-urlencoded"
点击事件、传递参数
使用bindtap绑定方法。参数用data-*的形式传递。记得全部小写。默认会放在dataset中。
openActivity: function (event) {
var params = event.currentTarget.dataset;
//dataset中多个单词由连字符-链接，不能有大写(大写会自动转成小写)
//底部菜单要使用wx.switchTab 来跳转界面
var type = params.type;
var activityType = params.activitytype;
var relativeId = params.relativeid;
}
五 详情数据绑定
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')
})
}
})
}
页面部分代码
{{news.title}}
{{publishTime}}
页面引用公用js
var util = require("../../../utils/util.js");
var app = getApp();
六 上拉刷新、下拉加载
上拉刷新
onPullDownRefresh: function () {
var that = this;
//下拉刷新，将pageNumber和pageSize分别设置成0和10，并初始化数据，让数据重新通过loadRoom()获取
that.setData({
start: 0,
maxResults: 10,
infoList: []
})
that.loadRooms();
wx.stopPullDownRefresh();
}
下拉加载
onReachBottom: function () {
//上拉分页,将页码加1，然后调用分页函数
var that = this;
var start = that.data.start;
that.setData({
start: ++start
});
setTimeout(function () {
wx.showToast({
title: '加载中..',
}),
that.loadRooms();
}, 1000)
}
需要在json中配置启用下拉事件
{
"enablePullDownRefresh": true
}
七 表单提交
表单提交注意点
bindsubmit表单提交事件；
bindinput输入框监控事件；
获得表单提交数据
formSubmit: function (e) {
//获得表单数据
var objData = e.detail.value;
var password = objData.password;
var mobile = objData.mobile;
var code = objData.code;
}
八 缓存数据读取
缓存写入
wx.setStorageSync('password', password);
wx.setStorageSync('mobile', mobile);
缓存读取、移除、清除所有
var mobile = wx.getStorageSync('mobile');
wx.removeStorageSync('mobile');
wx.clearStorage();
九 提示信息，弹出框
提示信息和弹框，有icon时最多显示7个字，icon为none时可显示全部信息。
wx.showToast({
title: '登录成功',
success: function () {
setTimeout(function () {
//要延时执行的代码
//跳转到成功页面
wx.switchTab({
url: '../index/index'
})
}, 2000) //延迟时间
}
})
模态框，确认取消对话框
wx.showModal({
title: '确认',
content: '确认提交订单',
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 () {
}
}
}
十一 打电话
打电话调用wx.makePhoneCall
phoneCall: function (mpbile) {
wx.makePhoneCall({
phoneNumber: "13724201432"
})
}
网友评论