微信小程序框架模板部署：mpvue2.x+typescript+webpack3.x

部署完成的模板github链接：https://github.com/pantt/mpvue2-typescript

开发准备

1.在微信公众平台注册申请AppID

2.安装开发者工具：在微信公众平台安装开发者工具，用于小程序调试

部署框架： mpvue

mpvue 继承自 Vue.js，其技术规范和语法特点与 Vue.js 保持一致。

1.vue-cli创建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

此时mpvue版本应为2.x,webpack 3.x
截止目前（2019/2/26）:

*mpvue暂不支持webpack4,mpvue-entry暂不支持mpvue 2.x

接下来，只需启动微信开发者工具，引入项目目录dist中的wx文件夹即可预览到简单的 mpvue 小程序。

2.配置Typescript

1.安装依赖

# 安装 vue 与装饰器,mpvue-loader目前支持用TypeScript来写，功能还在完善中(WIP)。需要搭 配vue-property-decorator来使用。
$ npm install --save vue vue-property-decorator
# 安装 typescript
$ npm install --save typescript@3.3.3333
# 安装  typescript 所需loader（注意存在版本兼容问题，需下载指定版本ts-loader与awesome-typescript-loader最新版目前不兼容webpack4以下版本）
$  npm install --save ts-loader@3.1.1 awesome-typescript-loader@4.0.1
# 安装声明文件@types/node @types/weixin-app
$ npm install --save @types/node @types/weixin-app

• 安装官方微信小程序定义文件:[[https://github.com/wechat-miniprogram/api-typings#微信小程序定义文件]]

  此为微信小程序 API 的 TypeScript 类型定义文件,请时刻关注官方最新版本

$ npm install miniprogram-api-typings

2.配置webpack 3.x：

• 找到resolve属性，在extensions参数中增加’.ts’：

  // webpack.conf.js
  resolve:
  extensions: ['.js', '.vue', '.json','.ts'],
  alias: {
  'vue': 'mpvue',
  '@': resolve('src'),
  },
  //...
  }

• 添加对应的loader：

// webpack.conf.js
module.exports = {
//...
module: {
rules: [
{
test: /\.vue$/,
loader: 'mpvue-loader',
options: {
//...
ts: [ //添加对应vue的loader
'babel-loader',
{
// loader: 'ts-loader',
loader: 'awesome-typescript-loader',
options: {
// errorsAsWarnings: true,
useCache: true,
}
}
]
}
},
// ts文件的loader
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
'babel-loader',
{
loader: 'mpvue-loader',
options:Object.assign({checkMPEntry: true}, vueLoaderConfig)//与同级的js中对应项值一致
},
{
// loader: 'ts-loader',
loader: 'awesome-typescript-loader',
options: {
// errorsAsWarnings: true,
useCache: true,
}
}
]
},
]
// ...
}

• 让TypeScript识别Vue文件:

TypeScript识别不了后缀为vue的文件，需要加入一个声明文件，在项目的src目录下新建一个名为vue-shim.d.ts的文件，在其中增加代码：

declare module "*.vue" {
import Vue from "vue";
export default Vue;
}

• 增加TypeScript配置:

为了使用TypeScript我们需要给它指定一个配置，在项目根目录下新建一个名为tsconfig.json的文件，增加内容(示例，完整配置请查看https://www.tslang.cn/docs/handbook/tsconfig-json.html)：

{
"compilerOptions": {
// 与 Vue 的浏览器支持保持一致
"target": "es2015",
// 这可以对 `this` 上的数据属性进行更严格的推断
"strict": true,
// 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
"module": "es2015",
"moduleResolution": "node",
"baseUrl": "./",
"outDir": "./dist/",
"paths": {
"vue": [
"node_modules/mpvue"
],
"@/*": [
"src/*"
]
},
"types": [
"@types/weixin-app",//声明文件
"@types/node"
],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"noImplicitAny": false,
"skipLibCheck": true,
"strictPropertyInitialization": false,
"experimentalDecorators": true
},
"include": [
"./src/**/*"
],
"exclude": [
"node_modules"
],
"typeAcquisition": {
"enable": true
}
}

• main.ts中：

// main.ts
import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator';
import { VueConstructor } from "vue";
interface IMpVue extends VueConstructor {
mpType: string
}
// 添加小程序hooks http://mpvue.com/mpvue/#_4
Component.registerHooks([
// app
'onLaunch', // 初始化
'onShow', // 当小程序启动，或从后台进入前台显示
'onHide', // 当小程序从前台进入后台
// pages
'onLoad', // 监听页面加载
'onShow', // 监听页面显示
'onReady', // 监听页面初次渲染完成
'onHide', // 监听页面隐藏
'onUnload', // 监听页面卸载
'onPullDownRefresh', // 监听用户下拉动作
'onReachBottom', // 页面上拉触底事件的处理函数
'onShareAppMessage', // 用户点击右上角分享
'onPageScroll', // 页面滚动
'onTabItemTap', //当前是 tab 页时， 点击 tab 时触发 （mpvue 0.0.16 支持）
])
Vue.config.productionTip = false
// 在这个地方引入是为了registerHooks先执行
const MyApp = require('./App.vue').default as IMpVue
const app = new Vue(MyApp)
app.$mount()

• 配置完main.ts后需要将webpack.conf.js中的配置入口文件后缀改为.ts,如下

//webpack.conf.js
//...
//配置多入口
function getEntry (rootSrc) {
var map = {};
glob.sync(rootSrc + '/pages/**/main.ts')
.forEach(file => {
var key = relative(rootSrc, file).replace('.ts', '');
map[key] = file;
})
return map;
}
const appEntry = { app: resolve('./src/main.ts') }
const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.ts')
const entry = Object.assign({}, appEntry, pagesEntry)
//...

• app.vue中
  mpvue-loader目前支持用TypeScript来写，功能还在完善中(WIP)。目前实现了用

  <script lang="ts" src="./xx.ts">

  这种方式的自动识别

<!-- App.vue -->
<script lang="ts" src="./app.ts"></script>
<style></style>

//app.ts
import { Vue, Component } from 'vue-property-decorator'
declare module "vue/types/vue" {
interface Vue {
$mp: any;
}
}
// 必须使用装饰器的方式来指定components
@Component({
mpType: 'app', // mpvue特定
}as any)
class App extends Vue {
// app hook
onLaunch() {
let opt = this.$root.$mp.appOptions
}
onShow() {
}
onHide() {
}
mounted() { // vue hook
}
}
export default App

• 页面中：

<!-- index.vue -->
<template>
<div class="counter-warp">
<p>Mpvue</p>
<p>ts value {{ ver }}</p>
<card text="card component"></card>
<a href="../counter/main" class="home">去往vuex</a>
</div>
</template>
<!--必须指定为ts-->
<script lang="ts" src="./index.ts"></script>
<style></style>

// index.ts
import { Vue, Component } from 'vue-property-decorator'
import Card from '@/components/card.vue' // mpvue目前只支持的单文件组件
// 必须使用装饰器的方式来指定component
@Component({
components: {
Card,
},
})
class Index extends Vue {

ver: number = 123
onShow() { // 小程序 hook
}
mounted() { // vue hook
}
}
export default Index

//main.ts
import Vue from 'vue'
import App from './index.vue'
const app = new Vue(App)
app.$mount()

• 组件中：

  <!-- card.vue -->
  <template>
  <div>
  <p class="card">
  From Card {{text}} {{ver}}
  </p>
  </div>
  </template>
  <!--必须指定为ts-->
  <script lang="ts" src="./card.ts"></script>
  <style></style>

// card.ts
import { Vue, Component, Prop } from 'vue-property-decorator'
// 必须使用装饰器的方式来指定component
@Component
class Card extends Vue {
@Prop({ default: '1' }) //注意用法！
text: string;
ver: number = 2;
onShow() {
}
onHide() {
}
mounted() { // vue hook
}
}
export default Card