
今天来介绍一款微信小程序开发辅助工具,微信小程序的开发规范是遵循微信自己打造的一种web生态,工具相当齐全、人性化,当注册好一个小程序后,就可以下载一个微信开发者工具,如下图所示:

从Github上搜寻了一款开源的微信小程序,用开发工具直接打开,运气好的话,小程序可以直接跑起来,可以简单看下小程序的逻辑和UI的代码:
UI

功能逻辑

大概看一眼,就知道不是纯粹的JS写法,也不是流行的React、Vue等写法,微信给小程序定义了一整套的组件库以及功能语法,只能通过官网来学习:https://developers.weixin.qq.com/miniprogram/dev/framework/
但是写过前端程序的朋友,肯定不希望每次开发都学习一套新的语法,一来学习成本比较高,二来已有的知识无法复用,也很憋屈。所以下面来介绍一款也许能够缩短微信小程序开发成本的工具:

https://taro.zone
Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。

因此开发过React 和 Vue的朋友有福了,可以继续按照React或者Vue的代码习惯来开发小程序,区别在于使用的是taro开发包:
React开发语法
import React, { Component } from 'react'import { View, Text } from '@tarojs/components'export default class Index extends Component { state = { msg: 'Hello World!' } componentWillMount () { } componentDidShow () { } componentDidHide () { } render () { return ( <View className='index'> <Text>{this.state.msg}</Text> </View> ) } }
Vue开发语法
<template> <view class="index"> <text>{{msg}}</text> </view></template><script>export default { data () { return { msg: 'Hello World!' } }, created () {}, onShow () {}, onHide () {} }</script>
按照taro的使用文档即可编译出微信小程序:
https://docs.taro.zone/docs/GETTING-STARTED

今天主要记录了下用流行的React或者Vue前端框架来开发微信小程序的方式,希望可以给朋友们一个新的视野。