用mpvue开发一款小程序并上线

mpvue是一款小程序开发框架，由美团点评团队基于Vue开发，这样大大减轻了我们开发小程序的成本，下面我就一步步开发并上线一款小程序。

小程序预览

安装启动 mpvue

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

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

# Project name 项目名称
# wxmp appid 小程序ID 去微信申请以后会得到
# Project description 小程序描述
# Author 作者
# Vue build runtime
# Use Vuex? 使用Vuex
# Use ESLint to lint your code? 使用eslint依赖规范你的代码

# 安装依赖
$ cd images
$ npm install
# 启动构建
$ npm run dev

构建成以后目录如下

├── README.md   项目的说明文档
├── build       项目构建相关代码
├── config      配置目录
├── index.html 
├── node_modules npm 加载的项目依赖模块   
├── package-lock.json 
├── package.json 项目配置文件
├── project.config.json
├── src     这里是我们要开发的目录
│   ├── App.vue
│   ├── components 组件 
│   ├── main.js
│   ├── main.json 小程序配置文件
│   ├── pages   存放小程序页面
│   └── utils   存放资源目录程序页面
└── static 静态资源目录

准备工作

由于官方的小程序编辑不是很友好，所以我们编写的时候一般会选择一款编辑器，可以使用Sublime、webStore、vs,编辑器一般用自己顺手的就好，但是也要下载小程序的编辑器，方便我们预览效果

下载微信官方编辑器

下载地址和编辑器的操作说明，可以参考官方文档，这里就不展开分享，附上编辑器下载地址
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

编写我们的第一个页面

先用微信开发者工具添加项目，appid如果不填写也不影响开发，但是不能在手机上预览，可以在上线前去申请一个小程序账号，申请流程比较简单。
再用自己顺手的编辑器打开项目，我们主要在src/pages下面添加文件即可，mpvue以及提供了官方事例，照着编写就可以啦。
我们就以src/pages/index为例,你也可以参考事例在scr/pages下新建一个文件夹，里面添加两个文件分别为:

# html  js css 都可以写到这个页面
index.vue 

# 可以在这里编写配置文件
main.js

我给大家分享的这款小程序只有一个页面，主要用到的小程序提供的swiper，具体使用方法如下 (更多使用说明参考小程序官方文档)

 <swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" bindchange='change()'>
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>

但是mpvue是以vue为基础的，所以我们把官方提供的案例修改成适用于vue,有以下几点需要注意。

wx:for 修改成  v-for
bindchange='change()' 修改成 @change='change()'

编写css

有以下几点建议
* 设计图设计成750px
* 使用rem代替rpx

.main{float:left;display:flex;box-sizing:border-box;width:7.5rem;}
.content{float:left;margin-top:10px;width:7.5rem;}
swiper{height:11rem;}
.item{position:relative;display:flex;width:7.5rem;height:11rem;flex-wrap:wrap;}
.slide-image{overflow:hidden;margin:auto;width:7rem;height:10rem;}
.item .describe{bottom:-1rem;opacity:0;}
.describe{position:absolute;left:0;display:flex;width:7rem;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(#000));background:-webkit-linear-gradient(top,transparent,#000);background:-moz-linear-gradient(top,transparent,#000);background:-ms-linear-gradient(top,transparent,#000);background-color:transparent;color:#fff;text-align:center;font-size:14px;line-height:1rem;opacity:1!important;justify-content:center;}
.describe image{float:left;margin-top:.175rem;margin-right:10px;width:.65rem!important;height:.65rem!important;border-radius:100%;}
.describe span{float:left;}
.current-item{z-index:10;border-radius:4px;-webkit-box-shadow:0 5px 12px rgba(255,255,255,.5);-moz-box-shadow:0 5px 20px rgba(255,255,255,.5);box-shadow:0 5px 20px rgba(255,255,255,.5);transition:all .5s;}
.current-item .describe{bottom:0;border-radius:0 0 4px 4px;opacity:10;transition:all .5s;}
.current-item image{width:100%;height:11rem;transition:all .5s;}

请求数据

小程序已经提供了请求数据的方法，使用方法如下

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默认值
  },
  success: function(res) {
    console.log(res.data)
  }
})

但是在使用的起来可能不是很好用，所以这里以Fly.js为例

Fly.js是一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。

安装Fly.js

在packapge.json中添加flyio后执行npm install

  "dependencies": {
    "mpvue": "^1.0.11",
    "vuex": "^3.0.1",
    "flyio": "^0.6.0"
  }

封装成接口，方便统一调用

我们的统一方法可以放在src/utils下,这里新建一个request.js
Fly.js的详情方法可以参考官方文档

 // 引入fly
var Fly = require("flyio/dist/npm/wx")

const request = new Fly()

// 配置请求基地址
request.config.baseURL = 'https://example.com/v1/'

request.interceptors.request.use(
  (request) => {
    // 给所有请求添加自定义header
    request.headers['token'] = wx.getStorageSync('token')
    wx.showLoading({title: '加载中...'})
    return request
  }
)

request.interceptors.response.use(
  (response, promise) => {
    wx.hideLoading()
    return promise.resolve(response.data)
  },
  (err, promise) => {
    wx.hideLoading()
    wx.showToast({
      title: err.response.data.msg,
      icon: 'none'
    })
    return promise.resolve()
  }
)

/***
 * 请求数据
 * @param url
 * @param data
 * @param method
 * @returns {FlyPromise<any>}
 */
export function getData (url, data, method='GET') {
  return request.request(url, data,{'method':method})
}

这样我们在使用的时候直接调用就可以啦

编写api

接口使用thinkphp5 进行编写，这篇文章主要是分享小程序的开发，API的编写就不详细分享了，我大致说一下实现方法，这里使用了unsplash的API，然后用thinkphp5调用接口每次返回20张图片信息，使用前需要去unsplash申请一下Access Key即可。这里也有一个很大的坑，使用unsplash API获取图片会先跳转unsplash的授权页面，但是在小程序中又不能打开别人的网页,所以我这里的解决方法是用python写个爬虫，定时去登录授权获取access_token,服务端授权成功以后把access_token缓存下来，请求图片列表的时候带上这个access_token，过程有点曲折，当然你也可以直接使用python爬取图片。

碰到的坑

到这里一个小程序就开发完了，这个小程序功能比较单一，授权登陆会在以后添加上去，但是整个流程走下来可能会碰到一些坑，我在这里分享下，我使用开发上线过程中碰到的一些坑

使用mpvue添加页面的时候，刷新微信开发者工具发现新添加的页面不能打开
解决方法：在main.js中添加新增页面路径执行npm run dev
bindchange 方法在mpvue中不能使用
解决方法：换成@change
接口没有问题，请求数据是报错
解决方法：小程序后台添加业务域名或在微信开发者工具中设置不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

上线第一款小程序

上线过程应该是整个流程中最简单的一步了，首先在微信开发者工具中点击上传按钮，填写版本号和版本描述，然后在微信公众平台登录你的小程序，上线即可。

总结

本篇主要分享了使用mpvue开发上线一款简单的小程序，对于前端开发者来说最难的部分可能是https的域名问题，我这里使用的是阿里云提供的免费证书，当然你也可以选择腾讯提供的免费证书，关于证书的申请与配置，我会放到下一章节中分享

用mpvue开发一款小程序并上线

猜你喜欢