BY彡阿长

2021-04-13 20:16 兴业数金_前端开发工程师

关注

微信小程序开发实战-第三周

第三周

3.项目开发阶段

组件化开发优点

组件复用
代码分离

3.3 生命周期函数

官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

onload：监听页面加载，最先被触发

onReady：监听页面初次渲染完成

onShow：监听页面显示

onHide：监听页面隐藏

onUnload：监听页面卸载

/** * 生命周期函数--监听页面加载 */
  onLoad: function (options) {
   

  },

  /** * 生命周期函数--监听页面初次渲染完成 */
  onReady: function () {
   

  },

  /** * 生命周期函数--监听页面显示 */
  onShow: function () {
   

  },

  /** * 生命周期函数--监听页面隐藏 */
  onHide: function () {
   

  },

  /** * 生命周期函数--监听页面卸载 */
  onUnload: function () {
   

  }

3.4 向服务器发送请求

https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

wx.request

https://autumnfish.cn/api/joke/list?num=3

开发阶段不校验域名合法性

同步异步与回调函数

回调函数

success：接口调用成功的回调函数

fail：接口调用失败的回调函数

传统解决`this`指向

在回调函数外部先保存this状态let that =this,然后在回调函数内部调用that

ES6中解决

使用箭头函数

success:(res) => {
   
	console.log(this.data)
}

使用promise解决回调地域的问题

二次封装

新建config.js

新建util文件夹，http.js文件

在http.js中进行请求封装

导出模块

第一种

export const config = {
   
    api_base_url: '',
    appkey: ''
}

export let fn1 = function() {
   

}

第二种

export {
   config, fn1}

导入模块

import {
     HTTP } from '../../util/http.js'

错误异常处理

wx.showToast({
   
title: '错误',
icon: 'none',
duration: 1500
})

定义错误处理函数

_show_error(error_code) {
   
        if (!error_code) {
   
            error_code = 1;
        }
        const tip = tips[error_code];
        wx.showToast({
   
            title: tip ? tip : tips[1],
            icon: 'none',
            duration: 2000
        })
    }

使用`models`

将发生请求的方法封装到models下的模块中

models\classic.js

import {
   HTTP} from '../util/http.js'

class ClassicModel extends HTTP {
   
    getLatest(sCallback){
   
    this.request({
   
        url:'classic/latest',
        success:(res)=>{
   
            sCallback(res);
        }
        })
    }
}

export {
   ClassicModel}

获取首页数据并渲染到页面中

设置数据

setData({
   
    classic:res
})

页面渲染流程

加载服务器数据
setData数据绑定
传递组件属性

data中的数据也是通过setData来进行更新

`movie`组件

在components下新建组件

classic\movie

<view hidden="{
    {hidden}}" class="classic-container">
    <image class="classic-img" src="{
    {img}}"></image>
    <image class="tag" src="/components/images/movie@tag.png"></image>
    <text class="content">{
  {content}}</text>
</view>

设置movie组件属性

properties: {
   
    img:String,
    content:String
  }

在classic.json文件中注册组件

"v-movie": "/components/classic/movie/index"

在页面中使用组件

<v-movie img="{
    {classic.image}}" content="{
    {classic.content}}"></v-movie>

改进like组件，将点赞和取消点赞事件处理写在事件的使用方

触发自定义事件

triggerEvent方法

Component({
   
  properties: {
   },
  methods: {
   
    onTap: function(){
   
      var myEventDetail = {
   } // detail对象，提供给事件监听函数
      var myEventOption = {
   } // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})