创建微信小程序的几种方式
创建微信小程序的几种方式
1. 使用原生方式
在官网上下载微信开发者工具,之后使用微信开发者工具新建项目即可。
微信这边提供了多个模板,可以直接下载模板快速搭建上线,也可以使用空白模板根据需求自行编写。
空白模板项目结构:
对于刚接触小程序的开发者来说存在一些问题:
- 标签与普通
HTML
不同,对于web
开发来说需要一定的时间进行适应。 - 项目结构不同,每个页面需要放在一个单独的文件夹(
script
、template
、style
单独放在一个文件里)
2. kbone
kbone
是微信推出的一个致力于微信小程序和 Web
端同构的解决方案。
kbone
通过实现一个适配器,在适配层里模拟出了浏览器环境,让 Web
端的代码可以不做什么改动便可运行在小程序里。
因为
kbone
是通过提供适配器的方式来实现同构,所以它的优势很明显:
- 大部分流行的前端框架都能够在
kbone
上运行,比如Vue
、React
、Preact
等。- 支持更为完整的前端框架特性,因为
kbone
不会对框架底层进行删改(比如Vue
中的v-html
指令、Vue-router
插件)。- 提供了常用的
dom/bom
接口,让用户代码无需做太大改动便可从Web
端迁移到小程序端。- 在小程序端运行时,仍然可以使用小程序本身的特性(比如像
live-player
内置组件、分包功能)。- 提供了一些
Dom
扩展接口,让一些无法完美兼容到小程序端的接口也有替代使用方案(比如getComputedStyle
接口)。
使用
使用 kbone-cli 快速开发
安装kbone-cli
脚手架
npm install -g kbone-cli
创建项目,可以选择对应的模板:
kbone init miniprogram2
示例选择vue
模板
模板下载好后根据提示指令命令即可:
# 跳转目录
cd miniprogram# 开发小程序
npm run mp# 开发 Web
npm run web
# 发布 Web
npm run build
目录结构为:
使用模板快速开发
将现有模板 clone
下来,然后在模板基础上进行开发。
- Vue模板
- React模板
- kbone-ui模板
- Preact模板
- Omi模板
3. uniapp
uni-app
是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到IOS
、Android
、Web
(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
下载Hbuilder
通过可视化页面创建项目
目录结构为:
HBuilderX
是通用的前端开发工具,但为uni-app
做了特别强化。
4. Taro
Taro 是一个开放式跨端跨框架解决方案,支持使用 React
/Vue
/Nerv
等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5
/ RN
等应用。
安装脚手架后创建项目:
# 使用 npm 安装 CLI
npm install -g @tarojs/cli# 使用 yarn 安装 CLI
yarn global add @tarojs/cli# 安装了 cnpm,使用 cnpm 安装 CLI
cnpm install -g @tarojs/cli
创建项目:
taro init miniprogram3
当然市面上还有其他类似mpvue
这样也能创建微信小程序,不过由于这些使用的人较少,加上一些已经停止维护了,因为本文并不做介绍。
创建微信小程序的几种方式相关推荐
- 微信小程序文件下载两种方式
1. 基本url方式下载(自定义下载文件名称) downloadDailyYear: function() {util.get(api.downloadDailyYear).then(function ...
- 小程序消息主动推送php,微信小程序有几种推送消息的方式
微信小程序有5种推送消息的方式,分别为:1.小票机订单提醒,实现对商家的消息提醒:2.短信提醒:3.模板消息,各种动态可及时掌握:4.公众号订单提醒:5.消息主动推送,商家主动出击.推销自己的最好手段 ...
- ETH:Windows搭建ETH(区块链技术)利用Web端和小程序端两种方式调用ETH上的SC智能合约
ETH:Windows搭建ETH(区块链技术)利用Web端和小程序端两种方式调用ETH上的SC智能合约 目录 1.Geth安装.配置文件.与ETH节点交互 1.1.下载并安装好geth客户端 1.2. ...
- java创建微信小程序二维码
创建微信小程序二维码有两个接口需要 一个是获取tocken的接口 一个是生成二维码的接口 获取tocken接口 //**********填写你的小程序appid 和 secret public sta ...
- 微信小程序的一种全局数据共享Mobx
学习的B站 黑马程序员 课程 https://www.bilibili.com/video/BV1834y1676P?p=81&spm_id_from=pageDriver 微信小程序的一种全 ...
- 怎样创建微信小程序?创建小程序难不难?
小程序现在为众多的企业商家提供了营销上的巨大帮助,小程序也已经成为了这些企业商家的标配,即使是初创的企业商家都会先去了解怎样创建微信小程序,创建小程序难不难等问题,那么下面就给大家分享怎样创建微信小程 ...
- 微信小程序退出按钮退出方式
微信小程序退出按钮退出方式 1,只能跳转到 tabBar配置的页面 wx.switchTab({url:''../xxx/xxx}) 2.返回上一级页面 (delta:返回的页面数,如果delta大于 ...
- 微信小程序页面跳转方式+跳转小程序(直接复制代码可用)
一. 微信小程序跳转页面方法 1.跳转到 tabBar 页面 wx.switchTab({url: '/index' }) 2.跳转到其他页面(非tabBar页) //redirectTo方法(会关闭 ...
- 微信小程序学习之五种页面跳转方法.
第一种:<navigator></navigator>标签. 这是最常见的一种跳转方式,相当于html里的a标签.但需要注意的是 该方法不能跳转tabbar页面. 格式为: & ...
最新文章
- Spring Boot thymeleaf模版支持,css,js等静态文件添加
- 微服务后如何做一次系统梳理
- 整活插件 炉石传说_炉石传说:一顿操作猛如虎,定睛一看原地杵,会长整活被死人抬走...
- 数据集shuffle方法中buffer_size的理解
- 全世界还有44亿人无法上网
- 清空文件下的SVN控制文件
- 分离链接法的删除操作函数
- Intel Core Solo/Duo处理器架构/微架构/流水线 - 前端/数据预取/SSE3
- 给公司的电脑配置theano
- 倍福--控制步进电机
- 物联网平台Thingsboard接入PM2.5数据实战
- Blender建模06
- Win10、win7、win8免费升级win11系统的方法
- HC05蓝牙模块AT指令与手机蓝牙控制STM32板载LED
- 搞计算机的真的不配拥有爱情吗。这是她给我留下的最后一段话
- 有关队列的操作 python
- java解压两层zip文件_Java解压缩zip - 解压缩多个文件或文件夹实例
- java模拟三人爬山_java笔记——模拟多人徒步爬山例子
- 如何做到两个IP地址是否属于同一网段?
- 面对音乐行业解决音乐侵权严重痛点:启动数字化转型的设计思维工作坊
热门文章
- 条形码入门指南,让你轻松了解条形码!(二)
- 使用gzip对数据进行压缩(Java、Android)
- 如何退出vi编辑页面
- libsvm java 实例_LibSvm流程及java代码测试
- Python爬虫系列(二):爬取中国大学排名丁香园-用户名和回复内容淘宝品比价
- 开源计算机电子书_开源工具来准备您的电子书以供出版
- 产品过程之—产品规划篇
- 2018之江杯全球人工智能大赛 :零样本图像目标识别 baseline 全部代码+注释+招队友
- (不会还有人不会做欧拉方程吧)考研数学中的欧拉方程
- MERR-04B、MERR-03A、MERR-03B叠加式泄压控制阀控制器