介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

uni-app,uni念you ni,是统一、聚合的意思。虽然名字里有app,但实际是泛指前端应用。
uni-app是为js开发者提供的一个全端开发框架,可以开发一次编译为web、App、小程序(微信/阿里/百度/字节跳动/QQ)、快应用。
它支持使用各种ide开发,比如vscode、webstorm,但与HBuilderX结合使用更完美。详情
uni-app是当前国内主流开发框架,手机端月活超过12亿,案例众多:详情
uni-app是vuejs的语法+小程序的API,它有独立的js引擎,原生能力的扩展基于独立js引擎,而不是基于webview的扩展方案。
在App端,uni-app支持视图层使用原生渲染(此时类似react native),也支持使用webview渲染(此时类似小程序引擎),开发者可以自行选择。

使用uniapp准备工作

1、下载HBuilderX软件(编写小程序代码)

HBuilder,H是HTML的缩写,Builder是建设者。
它是为前端开发者服务的通用IDE,或者称为编辑器。与vscode、sublime、webstorm类似。
它可以开发普通web项目,也可以开发DCloud出品的uni-app项目、5+App项目、wap2app项目。
目前有900万开发者在使用HBuilder。
老版的HBuilder是红色logo,已于2018年停止更新。绿色logo的HBuilderX是新版替代品。
除了服务前端技术栈,它也可以通过插件支持php等其他语言。
相比于竞品,它的优势有:

  • 运行速度快(c++内核)
  • 对markdown、vue支持更为优秀
  • 还能开发App、小程序,尤其对DCloud的uni-app、5+App等手机端产品有良好的支持

下载官网:HBuilderX-高效极客技巧 (dcloud.io)

官方文档:简介 - HBuilderX 文档 (dcloud.net.cn)

2、下载微信开发者工具(运行小程序界面)

帮助开发者简单和高效地开发和调试微信小程序,在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。

  • 使用公众号网页调试,开发者可以调试微信网页授权和微信JS-SDK 详情
  • 使用小程序调试,开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

下载官网:微信开发者工具(稳定版 Stable Build)下载地址与更新日志 | 微信开放文档 (qq.com)(建议下载稳定版)

官方文档:微信开放文档 (qq.com)

3、项目配置

使用HBuilderX新建项目

img

选择默认模板(Vue版本的选择根据项目使用的版本而定)

img

目录结构

img

  • pages(业务页面文件存放的目录)

    • Index

      • index.Vue(index页面)
  • static(存放应用引用静态资源(如图片、视频等等)的目录,注意:静态资源只能存放于此)

    • logo.png(后缀名是图片格式 Logo图片)
  • App.vue(应用配置,用来配置小程序的全局样式、生命周期函数等)
  • index.html(展示页面)
  • main.js(Vue初始化入口文件)
  • manifest.json(配置应用名称、appid、logo、版本等打包信息等)
  • pages.json(配置页面路径、页面窗口样式、tabBar、navigationBar等页面类信息)
  • uni.promisify.adaptor.js()
  • uni.scss (uni-app内置的常用样式变量)

manifest.json

配置应用标识(AppID)使用邮箱注册登入选择重新获取

img

4、微信开发者工具配置

img

  1. 打开软件->创建项目
  2. 使用邮箱注册一个账户
  3. 注意:注册成功后登入会显示账户异常什么的等等 清除一下浏览器缓存就可以了
  4. 小程序 (qq.com)
  5. 登入后会获得AppID 填入到了吗然后确定创建
  6. 在项目中配置AppId

img

5、启动小程序

运行~

img

选择刚安装开发者工具那个文件位置(选中后点确定 项目开始下载编译工具!)

img

下载成功后重新运行~

img

项目启动了!

img

最后修改:2023 年 05 月 23 日
如果觉得我的文章对你有用,请随意赞赏