mpvue小程序快速上手指南

需要了解一些原生小程序开发流程，主要是接口调用方式和目录结构。

安装

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

设置底部导航栏

添加一个页面

mkdir demo
cd demo
touch index.vue
touch main.js

main.js

import Vue from "vue";
import App from "./index";
const app = new Vue(App);
app.$mount();

index.vue

<template>
  <div>index</div>
</template>
<script>
  export default {
    name: "index",
    data() {
      return {};
    },
    mounted() {},
    methods: {},
  };
</script>

新建页面后需要重新运行npm run dev

准备素材，底部导航的图标（http://iconfont.cn/）

在app.json设置

{
  "pages": ["pages/index/main", "pages/logs/main", "pages/counter/main", "pages/demo/main"],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "debug": true,
    "list": [
      {
        "pagePath": "pages/index/main",
        "text": "首页",
        "iconPath": "static/img/home.png",
        "selectedIconPath": "static/img/home_fill.png"
      },
      {
        "pagePath": "pages/logs/main",
        "text": "动态",
        "iconPath": "static/img/creative.png",
        "selectedIconPath": "static/img/creative_fill.png"
      },
      {
        "pagePath": "pages/counter/main",
        "text": "官网",
        "iconPath": "static/img/favor.png",
        "selectedIconPath": "static/img/favor_fill.png"
      },
      {
        "pagePath": "pages/demo/main",
        "text": "官网",
        "iconPath": "static/img/shop.png",
        "selectedIconPath": "static/img/shop_fill.png"
      }
    ]
  }
}

设置全局变量`getApp();`

1	Vue.prototype.globalData = getApp();

引入 flyio 网络库

安装
1
yarn add flyio

main.js中加入

1
2
3

var Fly=require("flyio/dist/npm/wx")
var fly=new Fly
Vue.prototype.$http=fly

调用接口测试

如果调用的本地服务可以先设置不校验合法域名。。。在微信开发者工具，点击右上角详情进行设置

this.$http
  .get("https://www.apiopen.top/journalismApi")
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

引入 weui.css

下载地址：https://github.com/KuangPF/mpvue-weui/blob/master/static/weui/weui.css

## main.js
import './../static/weui.css';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

3.  用法 https://kuangpf.com/mpvue-weui

## 登陆

1. https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01

2. 需要使用按钮主动获取用户授权

   目前用户授权方式需要主动获取授权。两种方式引导用户点击授权按钮

   - 进入小程序时判断是否有用户信息没有的话，不进入 tab 页，而是授权页面。写一些欢迎信息
   - 用户进入用户个人中心。判断是否有用户信息，没有则展示授权按钮

   1. 第一种方式

      `app.json`中添加 pages `"pages/welcome/main"`

      welcome 页面中

      ```html
      <template>
        <div>
          <button open-type="getUserInfo" type="primary" lang="zh_CN" @getuserinfo="onGotUserInfo">授权</button>
        </div>
      </template>
      <script>
        const app = getApp();
        export default {
          name: "index",
          data() {
            return {
              canIUse: wx.canIUse("button.open-type.getUserInfo"),
            };
          },
          methods() {},
          mounted() {
            wx.getUserInfo({
              success: (res) => {
                console.log("获取用户信息.....", res);
                this.globalData.userinfo = res.userInfo;
                wx.switchTab({
                  url: "./../../pages/index/main", // 这个地方很奇怪，写 url: 'pages/index/main'，会报错，不能跳到首页
                });
              },
              fail: (res) => {
                console.log("没有获取用户信息");
                if (this.canIUse) {
                  console.log("没有用户信息");
                  // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
                  // 所以此处加入 callback 以防止这种情况
                  app.userInfoReadyCallback = (res) => {
                    console.log("回调里得到用户信息", res.userInfo);
                    this.globalData.userinfo = res.userInfo;
                    wx.switchTab({
                      url: "pages/index/main",
                    });
                  };
                } else {
                  console.log("低版本微信");
                  // 在没有 open-type=getUserInfo 版本的兼容处理
                  wx.getUserInfo({
                    success: (res) => {
                      console.log("得到用户信息", res.userInfo);
                      this.globalData.userinfo = res.userInfo;
                      wx.switchTab({
                        url: "pages/index/main",
                      });
                    },
                  });
                }
              },
            });
          },
          methods: {
            onGotUserInfo: function (e) {
              console.log("用户授权中得到用户信息", e.mp.detail.userInfo);
              this.globalData.userinfo = e.mp.detail.userInfo;
              wx.switchTab({
                url: "../../pages/index/main",
              });
            },
          },
        };
      </script>


  ![](https://i.loli.net/2018/09/22/5ba5bca695921.png)

  1
<button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo">授权</button> 这里的原生小程序应该写bindgetuserinfo="onGotUserInfo" mpvue 中使用 @getuserinfo="onGotUserInfo"

第二种方式

……

自定义分享

1	<button type="default" open-type="share">自定义分享</button>

当用户点击分享按钮后，会触发onShareAppMessage事件。这个方法不能定义到methods中。需要放到外层与data methods平级

onShareAppMessage返回一个对象可以自定义分享内容。具体参数https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.htm

在 path 参数中可以定义查询参数如/pages/index/main?id=123这样，当其他用户点击分享时，可以得到该参数。

在 vue 中可以通过console.log(this.$root.$mp.appOptions.query);得到传递的参数

页面跳转传参

1
2
3

wx.navigateTo({
  url: "/pages/index/index2/main?id=111",
});

通过this.$root.$mp.query接收参数

使用 font-awesome 图标

安装yarn add font-awesome
在 main.js 中引用import 'font-awesome/css/font-awesome.min.css';

修改build/webpack.base.conf.js

{
       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
       loader: 'url-loader',
       options: {
         // limit: 10000, //注释掉
         name: utils.assetsPath('fonts/[name].[ext]')
       }
     }