创建微信小程序的几种方式

这篇具有很好参考价值的文章主要介绍了创建微信小程序的几种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

创建微信小程序的几种方式

1. 使用原生方式

在官网上下载微信开发者工具,之后使用微信开发者工具新建项目即可。

创建微信小程序的几种方式

微信这边提供了多个模板,可以直接下载模板快速搭建上线,也可以使用空白模板根据需求自行编写。

空白模板项目结构:

创建微信小程序的几种方式

对于刚接触小程序的开发者来说存在一些问题:

  1. 标签与普通HTML不同,对于web开发来说需要一定的时间进行适应。
  2. 项目结构不同,每个页面需要放在一个单独的文件夹(scripttemplatestyle单独放在一个文件里)

2. kbone

kbone是微信推出的一个致力于微信小程序和 Web 端同构的解决方案。

kbone 通过实现一个适配器,在适配层里模拟出了浏览器环境,让 Web 端的代码可以不做什么改动便可运行在小程序里。

因为 kbone 是通过提供适配器的方式来实现同构,所以它的优势很明显:

  • 大部分流行的前端框架都能够在 kbone 上运行,比如 VueReactPreact 等。
  • 支持更为完整的前端框架特性,因为 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 开发所有前端应用的框架,开发者编写一套代码,可发布到IOSAndroidWeb(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/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这样也能创建微信小程序,不过由于这些使用的人较少,加上一些已经停止维护了,因为本文并不做介绍。文章来源地址https://www.toymoban.com/news/detail-500725.html

到了这里,关于创建微信小程序的几种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序中(设置成背景图的几种方式)

    1、使用网络图片 2、使用base64格式图片,访问图片base64编码  将背景图片使用编码base64进行转换, 网址如下: base64图片在线转换工具 - 站长工具 3、使用标签    注意有小朋友可能要用html那一套,使用background-image不适用于微信小程序 background-image: url(\\\"../images/local_image.png\\\")

    2024年04月25日
    浏览(24)
  • 小程序(二十六)微信小程序解析富文本的几种方式

    微信小程序解析富文本html大概有两种方式(我发现的)。 两种方法,各有各的优缺点。 这个标签解析的富文本会保留你在pc端编辑的样式,也就是说,你在pc端编辑的是什么样子,小程序端显示的也是什么样子。 示例: Html Javascript: 上边这是微信小程序官方文档给出的示例

    2024年02月10日
    浏览(33)
  • 微信小程序wxss定位/选择/查找元素的几种方式

    wxss定位、选择、查找元素的几种方式与css类似,下面介绍常用的几种: 选择器 样例 样例描述 .class .intro 选择所有拥有 class=\\\"intro\\\" 的组件

    2024年01月16日
    浏览(41)
  • 微信小程序--data的赋值与取值的几种方式

    赋值一定需要注意。需要setData的使用,这样页面才刷新,数据才会改变,并且分清that和this的使用 Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。其中的参数data用来设置初始数据,WXML 中的动态数据均来自对应

    2024年02月11日
    浏览(27)
  • 微信小程序中,将一张图设置成背景图的几种方式

    三种方法实现 1、使用网络图片 2、使用base64格式图片,访问图片base64编码  将背景图片使用编码base64进行转换, 网址如下: base64图片在线转换工具 - 站长工具 3、使用标签 注意有小朋友可能要用html那一套,使用background-image不适用于微信小程序 background-image: url(\\\"../images/loc

    2024年02月11日
    浏览(35)
  • 微信小程序返回上级页面传参的几种方法

    在做微信小程序跳转页面,经常会遇到二级页面要返回上级页面,并且需要携带参数,wx.navigateTo()跳转大家都知道直接在url上面拼接参数,之后再二级页面onLoad(options)里获取,但是返回页面wx.navigateBack()不可以那样做,所以就可以用以下几种方式来做,具体看个人业务适合用

    2024年02月08日
    浏览(46)
  • 在微信小程序部署AI模型的几种方法

    本文只是分享思路,不提供可完整运行的项目代码 以目标检测类模型为例,该类模型会输出 类别信息 , 置信度 , 包含检测框的4个坐标信息 但不是所有的onnx模型都能在微信小程序部署,有些算子不支持,这种情况需要点特殊操作。 微信小程序提供的接口相当于使用onnxr

    2024年04月27日
    浏览(41)
  • 微信小程序和H5之间相互跳转的几种情况

    直接通过web-view内嵌的方式,有且只有这一种方式。 H5内嵌在小程序的web-view中,想要打开小程序自身的页面,可通过 wx.miniProgram.navigateTo 方法,参考链接:web-view | 微信开放文档 (qq.com) H5在非小程序环境中,微信浏览器或者手机自带浏览器打开时,想要跳转到小程序,可通过

    2024年02月11日
    浏览(36)
  • 创建线程的几种方式

    线程和进程的区别: 进程是操作系统进行资源分配的最小单元。 线程是操作系统进行任务分配的最小单元,线程隶属于进程。 如何开启线程? 1、继承Thread类,重写run方法。 2、实现Runnable接口,实现run方法。 3、实现Callable接口,实现call方法。通过FutureTask创建一个线程,获

    2024年02月03日
    浏览(42)
  • 【微信小程序】富文本rich-text的图片预览效果的几种方法

    使用原生小程序开发,实现在富文本rich-text中的图片预览效果的几种方法对比。 update:因为方案3wxparser后续没有再维护,解析微信公众号文章时会出现排版错误的问题。作为插件也很难二次开发。换成 mp-html 了 一个不需要用额外组件或插件的方法: 思路 :使用正则把图片的

    2023年04月08日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包