一个微信小程序项目包括的初始化大目录就两个
pages
utils
其中在根目录下app.js 在该文件下通过app()这个接口来配置该项目启动时要运行的各种生命周期函数
其次在pages目录下的分页面中也有个.js文件 它们则是通过page（）来定义参数data和函数的
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1]
})
break
}
在page中获得变量值可以直接通过this.data.变量 但要想设置变量值必须通过this.setData({
变量: 新变量值
})
如果要循环生成节点需要用block或label组件包住
<blockwx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}"class="slide-image" width="355" height="250"/>
</swiper-item>
</block>
如果要获取多选框或者是picker选定的值可以通过e.detail.value获得
checkboxChange: function(e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
}
对于audio或者是vidio等媒体时需要先利用wx.create...context(id)来获取上下文
onReady: function (e) {
// 使用 wx.createAudioContext获取 audio 上下文 context
this.audioCtx =wx.createAudioContext('myAudio')
}
路由跳转中：
wx.navigateTo({
url: '../ceshi2/ceshi2'
})
是不能跳转到app.json设置了list中路径的！
小程序项目经验：
注意我们在进行项目的过程中可以单独新建一个目录来存放我们的静态资源如图片！
App.json配置：
下导航条设置：
"tabBar": {
"color": "#6e6d6b", //设置底部nav的字体颜色
"selectedColor": "#f9f027", //设置底部nav字体被选中后的颜色
"borderStyle": "white",
"backgroundColor": "#292929",//设置底部nav背景的颜色
"list": [{
"pagePath": "pages/index/index",//设置底部nav最左边路由
"iconPath": "images/footer-icon-01.png",//设置底部nav最左边的小图标路径
"selectedIconPath": "images/footer-icon-01-active.png",//设置底部nav最左边的小图标被选中时替换图片的路径
"text": "极速免税"
}, {
"pagePath": "pages/classify/index",
"iconPath": "images/footer-icon-02.png",
"selectedIconPath": "images/footer-icon-02-active.png",
"text": "分类"
}, {
"pagePath": "pages/cart/index",
"iconPath": "images/footer-icon-03.png",
"selectedIconPath": "images/footer-icon-03-active.png",
"text": "购物车"
}, {
"pagePath": "pages/my/index",
"iconPath": "images/footer-icon-04.png",
"selectedIconPath": "images/footer-icon-04-active.png",
"text": "我的"
}]
},
"debug": true
Index 首页.js代码设计：
var app =getApp()
Page({
data: {
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 3000,
duration: 1000,
loadingHidden: false // loading
},
//事件处理函数
swiperchange: function(e) {
//console.log(e.detail.current)
},
onLoad: function() {//加载时获取用户信息
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo) {
//更新数据
that.setData({
userInfo: userInfo//将获得的信息赋值给全局变量
})
})
//sliderList
wx.request({//一加载就向数据库或接口请求图片数据
url: 'http://huanqiuxiaozhen.com/wemall/slider/list',
method: 'GET',
data: {},
header: {
'Accept': 'application/json'
},
success: function(res) {
that.setData({//临时设置images全局变量以便在wxml获取该变量~
images: res.data
})
}
})
//venuesList
wx.request({
url: 'http://huanqiuxiaozhen.com/wemall/venues/venuesList',
method: 'GET',
data: {},
header: {
'Accept': 'application/json'
},
success: function(res) {
that.setData({//一加载获取主题馆图片src和navgater中的对应id
venuesItems: res.data.data
})
setTimeout(function () {
that.setData({//当数据获取后但未被渲染时调用加载图
loadingHidden: true
})
}, 1500)
}
})
//choiceList
wx.request({
url: 'http://huanqiuxiaozhen.com/wemall/goods/choiceList',
method: 'GET',
data: {},
header: {
'Accept': 'application/json'
},
success: function(res) {
that.setData({
choiceItems:res.data.data.dataList
})
setTimeout(function () {
that.setData({
loadingHidden: true
})
}, 1500)
}
})
}
})
可以看到我们很多图片的src和跳转链接以及文字说明都是直接从接口获得的，且都是在onload事件中进行变量声明和赋值的，并且大多数数据的结构都是数组+对象~
Wxml结构：（循环渲染结构）
<viewclass="venues_box">
<viewclass="venues_list">
<blockwx:for="{{venuesItems}}">
<viewclass="venues_item">
<navigatorurl="../brand/index?id={{item.id}}">
<imagesrc="{{item.smallpic}}"/>
</navigator>
</view>
</block>
</view>
</view>
<viewwx:if="{{item.tree.desc}}">
1.<text>{{item.tree.desc}}</text>
</view>
<view wx:else>
2.<text>{{item.tree.desc2}}</text>
</view> 如果又数据就渲染1 否则渲染2
带参路由传递接收参数页面js部分：
var app =getApp()
Page({
data: {
},
onLoad: function(options) {
var that = this
wx.request({
url: 'http://www.huanqiuxiaozhen.com/wemall/venues/getBrandAndType?id=' +options.id,//接收从主页面传过来的参数然后进行数据请求；
method: 'GET',
data: {},
header: {
'Accept': 'application/json'
},
success: function(res) {
that.setData({
brandList: res.data.data//数据请求成功后渲染到该页面！
});
}
})
}
})
微信小程序一般开发思路：
首先考虑要设计几个list页面（官方给的是2-5个），其次是设计获取数据的api以及数据格式（一般是数据包对象），接着是在onload生命周期函数中进行数据的获取以及wxml变量的设置,一般的我们的数据会包含以下几种信息，一个是text文本，一个是src(图片的) 最后是我们的页面跳转的参数！
当首页渲染完成后我们就可以获得一个带有参数的跳转路由，我们点击后会将url？后面的参数传递给目标页面，同时由于我们提前在目标页面的js文件中设置onload事件中的option进行参数获取，然后再进行wx.request（）数据请求，获得数据后再设置该页面的数据变量最后进行页面渲染。不管嵌套了多少层，它的基本实现过程都是这样！
这就是为啥要使用生命周期函数的原因！先获取数据再进行渲染，先onload () 在onready()