【vue】taro-vue+ts开发小程序快速上手

前言

• 最近有个小程序项目需要用taro-vue+ts来开发，用的是vue2，正好总结一下。

项目入口

• 微信开发者工具里的编译旁边可以选择入口，要能出现在那需要配置project.config.json和project.priviate.config.json字段：

"miniprogram": {
      "list": [
        {
          "name": "pages/testhello/index",
          "pathName": "pages/testhello/index",
          "query": "xxx=11",
          "scene": "",
          "launchFrom": "",
          "location": ""
        }
      ]
    }
  }

• 只有在里面配置的才可以在微信开发者工具里选入口。

app.ts

import { Component } from 'vue-property-decorator';
// 引入wx的ts包
import 'miniprogram-api-typings';
import store from './store';

import './app.scss';

Component.registerHooks([
  // app
  'onLaunch', // 初始化
  'onShow', // 当小程序启动，或从后台进入前台显示
  'onHide', // 当小程序从前台进入后台
  // pages
  'onLoad', // 监听页面加载
  'onShow', // 监听页面显示
  'onReady', // 监听页面初次渲染完成
  'onHide', // 监听页面隐藏
  'onUnload', // 监听页面卸载
  'onPullDownRefresh', // 监听用户下拉动作
  'onReachBottom', // 页面上拉触底事件的处理函数
  'onShareAppMessage', // 用户点击右上角分享
  'onPageScroll', // 页面滚动
  'onTabItemTap', //当前是 tab 页时， 点击 tab 时触发 （mpvue 0.0.16 支持）
]);

const App = {
  store,
  render(h) {
    // this.$slots.default 是将要会渲染的页面
    return h('block', this.$slots.default);
  },
};

export default App;

• 注册生命周期，后面在组件中即可使用对应名称的生命周期函数函数。

app.config.ts

export default {
  pages: [
    'pages/testhello/index',
    'pages/testpage2/testpage2',
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black',
  },
};

• 这里可以填入页面，新加页面需要填进来。

vue2ts写法

• 原生组件需要使用@tap触发事件，包装的组件事件触发看对应的文档。
• data就直接写类的属性即可。

<template>
  <view
    >page2222
    <view type="primary" @tap="xxxx">22222</view>
  </view>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit, Watch } from 'vue-property-decorator';

@Component
export default class Aaa extends Vue {
  @Prop() xxx: boolean;
  aaa = true;
  created() {
    console.log(this.xxx, 'xxxx');
  }

  smethod() {
    console.log('被调用');
  }
  kkk() {
    console.log('xxx');
  }
  //   xxxx() {
  //     console.log('up');
  //     this.$emit('up');
  //   }
  @Emit('up')
  xxxx() {
    console.log('upccc');
    this.aaa = !this.aaa;
  }
  @Watch('aaa')
  fff() {
    console.log('gggg');
  }
}
</script>

<style></style>

• 父级如下载入：

<Aaa ref="kkk" :xxx="showLoading" @up="kkk"></Aaa>

• 其中注释部分等同于下面的emit(‘up’)写法。
• 如果使用mixins或者需要引入别的组件，那么使用如下写法：

@Component({
  components: {
    Loading,
    AtButton,
    Aaa,
  },
})
export default class TestHello extends Mixins(GlobalAuth) {}

• 计算属性使用类的属性访问器制作：

 get paymentId() {
    return Taro.getCurrentInstance().router?.params.Id|| '';
  }

• 其他部分和js写法没太大区别。

总结

• 体验了下vue2和ts确实容纳的不是特别好，在取refs时等地方都需要进行断言。感觉在写法上还是比较舒服的。