微信小程序开发-mpvue框架-学习日记

微信小程序开发流程
编译后的小程序项目结构
mpvue项目结构
eslint代码风格
微信小程序页面跳转
微信小程序发送请求
请求封装
小程序加载时出现多次执行，created生命周期函数
属性绑定参数用：冒号，v-bind的缩写
动作绑定函数用@，v-on的缩写
app.json
wx-request.js请求封装
api.js写接口地址
每个页面有三个文件：xxx.vue, main.js, main.json
开发者手册
结束语

微信小程序开发流程：

申请小程序
下载微信开发者工具，稳定版。
安装vue脚手架，创建mpvue模板。
npm install 加载依赖， npm run dev编译运行项目，
打开微信开发者工具，导入项目，路径指向dist dist下的配置文件，加mini program root指向wx
就是用hbuilderx
，编写mpvue项目，用微信开发者工具来调试运行。
编译后的小程序项目结构

mpvue项目结构

eslint代码风格
下载的mpvue模板有严格的eslint代码风格，删除eslint在build目录下的webpack_base. config. js下的rules，注释吊eslint相关的那一段就行。
在这里插入图片描述

微信小程序页面跳转，
没有路由跳转，使用微信原生跳转，

微信小程序发送请求
关闭微信开发者工具请求的检查，可以发送本地请求进行调试。

请求封装，
wxhttp. js封装请求
main. js引入。
api文件夹，api. js写接口地址，index. js写请求接口。
在要用到的vue界面，import要用的接口，

请求封装参考博文
封装请求

后端接收参数，可以url传参，，用data传参后端要@requestbody

小程序加载时出现多次执行，created生命周期函数

场景
在mpvue开发时所有页面里面的created生命周期函数都会在小程序加载的时候，一次性执行，而不是每进入一个页面执行一次。举个栗子：

分类页面
created(){ console.log(‘分类页面的 created函数执行’)}
排行榜页面
created(){ console.log(‘排行榜页面的 created函数执行’)}
我的页面
created(){ console.log(‘我的页面的 created函数执行’)}
最后，启动小程序，不进入这3个页面，假设我现在有一个index页面，我们打开这个页面，会有一下输出：

分类页面的 created函数执行排行榜页面的 created函数执行我的页面的 created函数执行
解决方案
使用mpvue的mounted生命周期或者微信小程序原生的onLoad或者onReady生命周期代替

xpath 在浏览器审查元素，右键即可复制选中方法

vue属性
加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串字面量！

属性绑定参数用：冒号，v-bind的缩写
动作绑定函数用@，v-on的缩写

event事件
用e.mp.detail代替e.detail获取选中的值

web-view内嵌网页
个人微信小程序无法使用web-view，无法配置业务域名。

app.json
在这里插入图片描述
每个页面都要在pages上写明。

wx-request.js请求封装

function request (url, method, data, header = {
    
    }) {
    
    
  wx.showLoading({
    
    
    title: '加载中' // 数据请求前loading
  })
  return new Promise((resolve, reject) => {
    
    
    wx.request({
    
    
      url: url, // 仅为示例，并非真实的接口地址
      method: method,
      data: data,
      headers: {
    
    
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
    
    
        wx.hideLoading()
        resolve(res.data)
      },
      fail: function (err) {
    
    
        wx.hideLoading()
        reject(err)
      },
      complete: function () {
    
    
        wx.hideLoading()
      }
    })
  })
}

function get (url, data) {
    
    
  return request(url, 'GET', data)
}

function post (url, data) {
    
    
  return request(url, 'POST', data)
}

export default {
    
    
  request,
  get,
  post
}

api.js写接口地址

let base = 'http://localhost:8099'

export default {
    
    
  getTest: `${
      
      base}/test`,
  getcontext: `${
      
      base}/getcontext`,
  searchbook: `${
      
      base}/searchBook`

}

index.js写接口函数

import WXrequest from '../utils/wx-request'
import api from './api'

// 测试接口
export function getTest () {
    
    
  return WXrequest.post(api.getTest, '')
}
export function getcontext () {
    
    
  return WXrequest.post(api.getcontext, '')
}
export function searchbook (param) {
    
    
  return WXrequest.post(api.searchbook, param)
}

每个页面有三个文件：xxx.vue, main.js, main.json

开发者手册
腾讯云开发者手册，提供了大部分语言/组件/的开发者手册

结束语
微信小程序，有各种严格的限制，体验一下就好了，非企业工作需要还是不要做了。mpvue已停止更新，使用其他框架。
微信小程序告一段落，开始学习使用vue开发移动端app，加油打工人。

微信小程序开发-mpvue框架-学习日记

猜你喜欢