mpvue，koa开发微信小程序（二）网络请求相关

腾讯云（后台）

1. 进入微信公众平台|小程序 - 设置 - 开发者工具 - 腾讯云扫码开通 - 后台管理
2. 下载Node.js Domo - copy sever文件 - 直接粘贴在项目my-pro目录中
3. 项目根目录下 project.config.json 
4. 增加配置"qcloudRoot":"./sever"  //腾讯云的根目录
5. 这个sever就是一个比较标准的koa项目

• 腾讯云后台 - 常见问题 - 如何搭建本地开发环境CONF中所有配置复制下来 - sever下
• config.js CONF中黏帖后配置ID选项
• 配置完成 执行 npm install （sever也是一个完整的后端项目，存在相关npm依赖）
• 方便调试 可安装 npm install -g nodemon （方便调试）
• 全部完成 npm run dev

本地数据库启动

1. mysql -uroot
2. create database xxx //新建数据库，在sever下config.js中mysql配置项db存在名称
3. use cAuth; //进入数据库
4. show tables; //展示表
5. select * from "表名"；  //查询
6. desc 表名；  //查看表结构
7. net start/stop/restart mysql;   //启动/关闭/重启mysql数据库

配置完成 

eslint反复报错，情况下建议先关闭eslint校验，
项目-build-webpack.base.conf.js-rules eslint-loader关闭（50·58行注释掉）

注意在项目入口 src下app.vue 不存在template模板，否则报错。

main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
const app = new Vue(App)
app.$mount()

export default {
  // 这个字段走 app.json
  config: {
    // 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把
webpack entry 里面的入口页面加进去
    pages: ['^pages/books/main'],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#EA5149',
      navigationBarTitleText: '成良',
      navigationBarTextStyle: 'light'
    },
    "tabBar":{
        selectedColor:'#EA5149',
        list:[
            {
                pagePath:'pages/books/main',
                text:'首页',
                iconPath:'static/img/book.png',
                selectedIconPath:'static/img/book-active.png'
            },
            {
                pagePath:'pages/comments/main',
                text:'评论',
                iconPath:'static/img/todo.png',
                selectedIconPath:'static/img/todo-active.png'
            },
            {
                pagePath:'pages/me/main',
                text:'我的',
                iconPath:'static/img/me.png',
                selectedIconPath:'static/img/me-active.png'
            }
        ]
    }
  }
}

网络请求项

• 在本地调试代码时，不满足小程序域名要求（https,80端口）
• 右上角详情-勾选不校验安全域名
• 上面提到过async+await设置网络请求
• 设置util.js工具函数，封装微信小程序wx.request

import config from './config' //静态信息资源

export function get(url){
  return new Promise((resolve,reject)=>{
    wx.request({
      url:config.host+url,
      success:function(res){
        if(res.data.code === 0){
          resolve(res.data.data)
        }else{  
          reject(res.data)
        }
       }  
  })
 })
}

在App.vue中使用

import {get} from "./util"

export default{
  async created(){  //小程序生命周期函数
    const res = await get('/adress')
    console.log(res)
  }
}