部署完成的模板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
扫一扫
3731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
