网站首页 > 资源文章 正文
今天来介绍一款微信小程序开发辅助工具,微信小程序的开发规范是遵循微信自己打造的一种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前端框架来开发微信小程序的方式,希望可以给朋友们一个新的视野。
猜你喜欢
- 2024-10-19 开发微信小程序软件(开发微信小程序软件哪个好)
- 2024-10-19 小程序开发工具“即速应用”获千万级别A轮融资
- 2024-10-19 小程序批量发布小助手工具,无需对接开放平台附源码
- 2024-10-19 跨平台小程序开发者工具,HBuilder X 还是 VS Code
- 2024-10-19 如何学习微信小程序开发?掌握这些编程语言和技能就够了!
- 2024-10-19 小程序在线制作工具推荐:使用两个数码商城小程序模板,轻松搭建
- 2024-10-19 8款相见恨晚的微信小程序,让手机更好用,还不知道可惜了
- 2024-10-19 零基础入门小程序~开发属于自己的第一个小程序
- 2024-10-19 在线制作微信小程序工具分享(微信小程序在线生成)
- 2024-10-19 05. 零基础开发小程序——认识微信开发者工具的基本使用
你 发表评论:
欢迎- 最近发表
-
- YouTube应用下载全攻略:安卓、iOS及视频下载指南
- 谷歌浏览器Chrome 38.0.2125.101稳定版下载
- 谷歌浏览器(Chrome)官方网站下载地址
- 谷歌浏览器 Chrome v78.0.3904.108 正式版发布(附下载地址)
- 抛弃Windows吧!谷歌推免费Chrome系统,一个U盘就搞定
- 微软免费AR手游《我的世界Earth》上架:仅66MB
- 三星Note4升级安卓6.0.1出现怪异现象,求大神支招解决
- 红米k40手机4*1天气插件(红米k40pro天气设置到桌面)
- 一加11拆解:隐藏在强悍性能下的还有你不知道的细节
- 三星Galaxy Note 4/Edge 直升安卓5.0.1
- 标签列表
-
- 电脑显示器花屏 (79)
- 403 forbidden (65)
- linux怎么查看系统版本 (54)
- 补码运算 (63)
- 缓存服务器 (61)
- 定时重启 (59)
- plsql developer (73)
- 对话框打开时命令无法执行 (61)
- excel数据透视表 (72)
- oracle认证 (56)
- 网页不能复制 (84)
- photoshop外挂滤镜 (58)
- 网页无法复制粘贴 (55)
- vmware workstation 7 1 3 (78)
- jdk 64位下载 (65)
- phpstudy 2013 (66)
- 卡通形象生成 (55)
- psd模板免费下载 (67)
- shift (58)
- localhost打不开 (58)
- 检测代理服务器设置 (55)
- frequency (66)
- indesign教程 (55)
- 运行命令大全 (61)
- ping exe (64)
本文暂时没有评论,来添加一个吧(●'◡'●)