微信小程序

一丶微信小程序双向数据绑定,父子传参

对应属性前加入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的时候调用。

持续更新中！！！！

五丶微信小程序上拉加载更多(scroll-view组件)

六丶小程序页面跳转有几种方式

七丶微信小程序本地存储

八丶小程序如何使用vant

九丶小程序中的吸顶效果（小程序操作DOM）

十一丶小程序返回到顶部

十二丶微信小程序授权登陆

十三丶小程序微信支付流程

十四丶小程序发布流程