一丶微信小程序双向数据绑定,父子传参
对应属性前加入model:
前缀:
<input model:value="{{value}}" />
父传子:
// custom-component.js
Component({
properties: {
myValue: String
}
})
自定义组件的wxml文件,修改父组件传来的数据myValue
<input model:value="{{myValue}}" />
二丶小程序自定义组件封装
在根目录下创建一个components目录,用来存放所有组件
例如我们创建一个w-swiper组件,在components目录下创建w-swiper目录。
自定义组件类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成。
wxml:
<swiper indicator-dots='true'
indicator-active-color='#ff5777'
autoplay='true'
circular='true'
interval='3000'
class='swiper'>
<block wx:for="{{images}}" wx:key="index">
<swiper-item>
<image class="swiper-image" src="{{item.image}}"/>
</swiper-item>
</block>
</swiper>
json :
// components/w-swiper/w-swiper.js
Component({
/**
* 组件的属性列表
*/
properties: {
images:{
type:Array,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
{
"component": true,
"usingComponents": {}
}
cate.js
// pages/cate/cate.js
Page({
/**
* 页面的初始数据
*/
data: {
topImages: [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that=this;
wx.request({
url: 'http://test.com/api/list', //仅为示例,并非真实的接口地址
data: {
},
method:'get',
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data.data.banner.list)
that.setData({topImages:res.data.data.banner.list})
}
})
},
cate.json
{
"usingComponents": {
"w-swiper":"/components/w-swiper/w-swiper"
},
"navigationBarTitleText": "轮播"
}
cate.wxml
<w-swiper images='{{topImages}}'></w-swiper>
完成!
三丶使用promise封装wx.request()
1在根目录下创建http
目录及api.js
文件fetch.js
以及http.js
文件;
在根目录下创建env目录,创建index.js配置并导出多个开发环境
module.exports={
//开发环境
Dev:{
"BaseUrl":"https://www.develep.com"
},
//测试环境
Test:{
"BaseUrl":"https://www.test.com"
},
//生产环境
Prod:{
"BaseUrl": "https://api.douban.com"
}
}
在api.js中统一管理,请求的url地址
module.exports={
"hot":"/v2/movie/in_theaters",
"top250": "/v2/movie/top250",
"detail": "v2/movie/subject"
}
在fetch.js中用promise对wx.request()进行封装
//封装wx.request()网络模块
module.exports=(url,method,data)=>{
let p=new Promise((resolve,reject)=>{
wx.request({
url: url,
method:method,
data:Object.assign({},data),
header:{'Content-Type': 'application/text' },
success(res){
resolve(res)
},
fail(err){
reject(err)
}
})
})
return p;
}
在http.js,根据当前环境,设置相应的baseUrl
, 引入fetch中封装好的promise请求,封装基础的get\post\put\upload等请求方法,设置请求体,带上token和异常处理等;
设置对应的方法并导出;
const evn=require('../env/index.js')
const api=require('./api')
const fetch = require('./fetch')
//确定开发环境
let baseUrl=evn.devBaseUrl;
//如果接口需要token鉴权,获取token
let token=wx.getStorageSync('token');
//轮播请求函数
function banner(){
return fetch(baseUrl+api.banner,'get',{})
}
//list列表函数
//分类接口函数
module.exports={
banner
}
在全局app.js中导入http,注册到根组件
const http=require('./http/http.js')
// App.config=config[env];
App({
http, // http.fetch
})
在具体页面导入,并使用;
//获取应用实例
const app = getApp();
Page({
data: {
list:[]
}
onLoad: function () {
app.http.banner().then((res)=>{
this.setData({
list: res.data.list
}) })
}
四丶小程序生命周期钩子函数
- 小程序注册完成后,加载页面,触发onLoad方法。
- 页面载入后触发onShow方法,显示页面。
- 首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。
- 当小程序后台运行或跳转到其他页面时,触发onHide方法。
- 当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。
- 当使用重定向方法wx.redirectTo(object)或关闭当前页返回上一页wx.navigateBack(),触发onUnload。
总结:
- onLoad: 页面加载。一个页面只会调用一次。参数可以获取wx.navigateTo和wx.redirectTo及中的 query。
- onShow: 页面显示。每次打开页面都会调用一次。
- onReady: 页面初次渲染完成。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
- onHide: 页面隐藏。当navigateTo或底部tab切换时调用。
- onUnload: 页面卸载。当redirectTo或navigateBack的时候调用。