uni-app开发

参考帖

uniapp官方文档

组件库

项目中肯定需要使用第三方组件库，因为现有的这些不够方便我们去使用

uview： 演示 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

ThorUI： 介绍 | ThorUI文档

创建uni-app项目

有HBuilderX可视化工具和vue-cli命令行两种方式。

命令行方式创建：

1. 安装nodejs、npm、编辑器HBuilderX

Node.js — 下载 Node.js®

HBuilderX-高效极客技巧

2. 切换npm淘宝镜像：

​npm config set registry https://registry.npm.taobao.org

3. 全局安装vue-cli：

npm install -g @vue/cli@4

4. 创建uni-app

vue create -p dcloudio/uni-preset-vue hh-uniapp

由于国内网络环境问题，可能下载失败。在设备中增加固定的 hosts（如：140.82.113.4 github.com）

C:\Windows\System32\drivers\etc中hosts文件复制一份，在最后一行添加

20.205.243.166:443 github.com，保存后，覆盖原来的hosts文件即可。

5. 运行项目

npm run serve

uniapp开发规范

页面文件遵循vue单文件规范（SFC）；

组件标签靠近小程序规范；

接口能力（JS API）靠近微信小程序，前缀wx换为uni；

数据绑定及事件处理同vuejs规范，同时补充了app和页面的生命周期；

多端适配，建议使用flex布局。

HBuilderX编辑器使用

HBuilderX 文档

工具-插件安装-安装git插件

easy-git安装：

下载插件：easy-git Git源代码管理工具 - DCloud 插件市场

解压后放在HBuilderX安装目录的plugins下，重启编辑器。

tips:

1. uniapp微信小程序发布后获取当前位置失败原因，未在微信公众平台开发管理-开发设置中配置腾讯地理位置接口域名（https://apis.map.qq.com）
2. 小程序发布体积过大优先压缩图片，推荐tinypng.com