微信小程序学习

1、准备工作

到微信小程序开发平台注册账号，并且下载开发工具获得appid，在小程序开发工具中新建项目，并且填入appid，网址： https://mp.weixin.qq.com/

2、小程序的文件类型

样式文件： wxss，骨架文件： wxml，逻辑文件：js，配置： json =》构成页面元素其中 app.json app.wxss app.js这三个文件是全局文件

注意：json文件中是不能进行代码注释的

3、app.json中的结构

{
  "pages":[    //注册的页面
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{ //导航栏的全局配置，具体参见文档
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "听风不语",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

4、小程序开发的组件化注册

小程序中的相对路径与绝对路径

　　相对路径：相对于当前文件目录进行匹配例如 "component/like/index" 则表示当前目录下的component文件夹的文件，

　　绝对路径：如果 "/component/like/index"则会定位到根目录下的component的文件夹下

微信小程序页面中注册组件

相对路径进行注册

{
  "usingComponents": {
    "love-comp": "../components/love"
  }
}

绝对路径进行注册

{
  "usingComponents": {
    "love-comp": "/components/love"
  }
}

注意：在微信小程序页面设计的过程中，要以IPHONE6的尺寸进行设计，通常来讲iphone6的物理尺寸是 750 * 1134，在微信小程序中显示是 375 * 667 是2倍的关系，并且在写样式的时候，使用rpx是表示对应的像素会随着机型的变化进行变大或者缩小，但是如果不希望其随着机型的放大缩小而变化的话，那么就可以使用px进行设置, 如果需要对全局的样式进行配置，那么就可以按以下方法进行设置

/**app.wxss**/
page{
  color: red;
}

因为小程序在进行页面引入的时候，会自动在外围包一层page元素，此外注意flex与inline-flex的使用

组件的生命周期函数 =》这里的生命周期函数都放在lifetimes里面

lifetimes: {
  created() { //在组件实例刚刚被创建时执行
    console.log('this is created')
  },
  attached() {  //在组件实例进入页面节点树时执行
    console.log('this is attached')
  },
  ready() { //在组件在视图层布局完成后执行
    console.log('this is ready')
  },
  moved() {  //在组件实例被移动到节点树另一个位置时执行
    console.log('this is move')
  },
  detached() { //在组件实例被从页面节点树移除时执行
    console.log('this is detached')
  },
  error(err) {  //每当组件方法抛出错误时执行
    console.log(err)
  }
}

5、事件绑定机制

bind:tap='taphandle'
bindtap='taphandle'
catch:tap='taphandle'
catchtap='taphandle'

bind与catch的区别在于前者不会阻止冒泡事件，而后面会阻止冒泡事件

需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

6、组件的properties设定与值的变更

组件内使用外部传入的值

Component({
    properties: {   //接收使用properties对象里的值进行接收
        love: {
            type: Boolean,　　//类型
            value: false    //默认值
        },
        count: {
            type: Number,
            value: 0
        }
    },
    data: {},
    methods: {
        tapHandle() {
            this.love? this.properties.count --: this.properties.count ++;
            this.love = !this.love
            this.setData({ //当需要更改properties里的值的时候，用setData,程序会先在data中寻找对应的属性，没有那么会到properties中进行查找
                count: this.properties.count,
                love: this.love
            })
        }
    }
});

注意： 当需要更改properties里的值的时候，用setData,程序会先在data中寻找对应的属性，没有那么会到properties中进行查找

properties可以声明多个类型

Component({
  properties: {
    lastLeaf: {
      // 这个属性可以是 Number 、 String 、 Object 三种类型中的一种
      type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})

7、微信内置发送请求的方法 wx.request，并且接入Mock.js

具体的文档地址： https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

在微信小程序中，判断是否是生产环境，与非生产环境使用

/ /获取当前帐号信息
const accountInfo = wx.getAccountInfoSync();
// miniProgram.envVersion的合法值：develop开发版、trial体验版、release正式版

在微信小程序中接入mock.js

在app.js上添加代码

const { miniProgram: { envVersion } } = wx.getAccountInfoSync()　　//判断是否是生产环境，如果是生产环境，那么引入mock.js
if(envVersion === 'develop') {
  const { mockXHR } = require('./mock/data/index')
  mockXHR()
}

在项目中添加文件夹mock并且引入 mock.js库文件

在data/index.js中添加如下代码

import Mock from '../mock-min'
import home from './home'

const mocks = [
    ...home
]

export function param2Obj(url) {
    const search = url.split('?')[1]
    if (!search) {
        return {}
    }
    return JSON.parse(
        '{"' +
        decodeURIComponent(search)
            .replace(/"/g, '\"')
            .replace(/&/g, '","')
            .replace(/=/g, '":"')
            .replace(/+/g, ' ') +
        '"}'
    )
}

export function mockXHR() {
    //存储原有的微信小程序的方法
    let _request = wx.request;
    //进行重写wx.request的方法
    Object.defineProperty(wx, 'request', { writable: true })
    //重写微信小程序wx.request的方法，实现mock数据的调用
    wx.request = (req) => {
        let { url } = req;
        let method = req.method || 'get';
        let target = mocks.filter(val => new RegExp(val.url).test(url) && val.type.toLocaleLowerCase() === method.toLocaleLowerCase() )
        if(target.length > 0) {
            let match = target[0];
            if(match.response) {
                let res = match.response instanceof Function? match.response.call(null, {
                        method, query: param2Obj(url)
                    }): match.response
                req.success && req.success(Mock.mock(res)) //调用里面的成功方法
            }
        } else {
            return _request(req)   //调用原生的小程序方法，并且返回异步的逻辑
        }
    }
}

export default mocks

便可实现mock的使用，这样就可以愉快的制作假数据了；

export default [
    {
        url: '/classic/latest',
        type: 'get',
        response() {
            return {
                statusCode: 200,
                data: {
                    code: 200,
                    data: {
                        "content": "人生不能像做菜，把所有的材料准备好才下锅",
                        "fav_num": 0,
                        "id": 1,
                        "image": "",
                        "index": 7,
                        "like_status": 0,
                        "pubdate": "2018-06-22",
                        "title": "李安《饮食男女》",
                        "type": 100
                    }
                }
            }
        }
    }
]

注意：在开发阶段如果接入未在小程序中注册的域名会有报错的风险，那么可以在项目中的设置=》项目设置=》不较验合法域名（选中即可）

二次封装wx.request方法，使用的时候可以进行再改造

export const BASE_URL = 'http://www.yfbill.club'

const statusConfig = {
    400: '请求语法有误',
    401: '访问被拒绝，您没有访问的权限',
    403: '禁止访问',
    404: '没有找到指定的资源',
    500: '服务器内部错误，请稍后再试'
}

const dealFail = (res, reject) => {
    let msg = res.statusCode && statusConfig[res.statusCode] || '未知错误，请稍后再试'
    wx.showToast({
        title: msg,
        icon: 'none',
        duration: 3000,
        success() {
            reject(res)
        }
    })
}

const dealSuccess = (res, resolve, reject) => {
    let { statusCode } = res;
    if(statusCode === 200) {
        let { data } = res
        resolve(data)
    } else {
        dealFail(res, reject)
    }
}

export const request = (params) => {
    return new Promise((resolve, reject) => {
        !params.success && (params.success = res => { dealSuccess(res, resolve, reject) })
        !params.fail && (params.fail = res => { dealFail(res, reject) })
        let { url } = params;
        !url.startsWith('http') && (params.url = BASE_URL + params.url)
        wx.request(params)
    })
}

8、父子组件的传值方式

子组件

<!--注意这里的事件不需要添加花括号，在父组件中定义loveEvent对事件进行监听-->
<love-comp bind:loveEvent="loveEvent" love="{{classical.like_status}}" count="{{classical.fav_num}}"></love-comp>

//子组件中通过triggerEvent进行对外发送事件
let isLove = this.properties.love;
this.triggerEvent('loveEvent', {
    isLove
})

父组件

loveEvent() {
    console.log(arguments)
}

20、微信小程序常用指令

wx.showToast() 　　//显示提示框，里面有接口调用成功，失败的钩子表示该组件是否调用成功的意思，一般作为一个信息提示作用，隐藏icon

wx.showLoading()　　//显示loading提示框，关闭用 wx.hideLoading(), 一般作为请求接口时加载用