目录
一、uni-app介绍
uni-app 是一个使用 Vue.js 开发所有前端应用程序的框架。开发者编写了一套代码,可以发布到IOS、Android、H5以及各种小程序(微信/支付宝/百度/今日头条/钉钉)等平台
uni-app官网
二、环境建设1.1 编辑器HbuilderX
HbuilderX 是一个通用的前端开发工具,但是针对 uni-app 做了特别的增强
HbuilderX官网
选择电脑系统对应的版本
下载后获取压缩包。解压后,在HbuilderX文件夹下找到HbuilderX.exe并使用
1.2个微信开发者工具
微信开发者工具官网
选择电脑系统对应的版本
三、项目创建3.1 创建项目
点击工具栏中的文件->新建->项目:
创建完成后,生成项目的基本结构
3.2个项目运行3.2.1个浏览器运行
进入hello-uni-app项目 小程序开发制作 ,点击工具栏上的运行->运行到浏览器->选择浏览器,就可以在浏览器中体验H5版本的uni-app了。
3.2.2微信开发者工具运行
进入hello-uni-app项目微信小程序开发平台,点击工具栏上的运行->运行到小程序模拟器->微信开发者工具,即可在微信开发者工具中体验uni-app。
注意:如果是第一次使用,需要配置小程序ide的相关路径才能成功运行。如下图,需要在输入框中输入微信开发者工具的安装路径。如果HBuilderX无法正常启动微信开发者工具,需要开发者手动启动,然后将生成小程序项目的uni-app路径复制到微信开发者工具中微信小程序开发平台,在HBuilderX中开发,在微信开发者工具实时特效。
如果微信控制台运行后出现如下错误,需要在项目的manifest.json中配置微信小程序AppID
微信小程序AppID获取(需要在微信小程序中申请账号,否则会获取到visitor id)
四、项目目录文件
为实现多终端兼容,综合考虑编译速度、运行性能等因素,uni-app超越以下开发规范:
备注:我的个人笔记更多是学习过程中做的一些记录,没有正式文件那么规范。当然,它们也可以作为参考。不过像之前记录的Flex布局笔记,内容可能比较杂乱。如果笔记有什么不对的地方微信小程序开发平台,希望大家能帮我指出来
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网