生成uni-app

创建 uni-app 项目

创建 uni-app 项目

官方提供了两种方式创建 uni-app 项目。

1. 通过 HBuilderX 编辑器创建。
2. 通过 VueCli 命令行创建。

选择：HBuilderX 插件不同，快捷键不同，代码提示分隔不同。为了减少对新编辑器的使用成本。最终我们通过 VueCli 命令行创建 uni-app 项目。

通过 vue-cli 创建 uni-app 项目

官方文档：https://uniapp.dcloud.io/quickstart-cli

下载前先修改为淘宝镜像：

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

创建 uni-app 项目：

vue create -p dcloudio/uni-preset-vue xxxxx

命令行解释

• vue create 为固定写法，表示通过 VueCli 脚手架创建 Vue 项目。
• -p dcloudio/uni-preset-vue 表示 VueCli 脚手架去 dcloudio 远程服务器下载 uni-app 项目。
• xxxxx 为项目名称。

选择 uni-app 模板

• 使用默认模板即可。

在微信开发者工具中运行小程序代码 - 重要

编译成微信小程序代码

// 编译成小程序端 - 需要导入微信开发者工具后才能运行
npm run dev:mp-weixin !

// 编译成浏览器端!
npm run dev:h5!

微信开发者工具导入项目

Uni-app 使用注意

新建页面注意事项

1. 页面配置需要在 pages.json 一个一个的手动添加。
2. 在 src/pages 文件夹下新建文件 xxx/index.vue。
3. index.vue 文件内部一定需要有 Vue 文件的基本结构 <template> <script> 。
4. VS code 删除，修改或 Vue 文件的时候，容易出现报错，重新运行 npm run dev:mp-weixin 编译。
5. 如果微信开发者工具出现未知报错，重启微信开发者工具。

Vue 单文件页面注意点

1. <template> 模板中使用小程序的组件，不要使用 html 标签。
2. <script> 使用小程序生命周期，不建议使用 Vue 的生命周期。
3. Vue 单位件只生成 wxml wxss js 文件，如果要修改配置项需要通过 pages.json 修改。

uni 使用建议

1. 如果要进行多端开发，建议选择 uni 。
2. 模板语法，建议使用 vue 的模板语法， v-for v-if :key 等。
3. 布局的时候使用小程序的组件，<view> <image> <navigator> 等。
4. 样式可以使用 less 预处理器，前提要通过 npm 安装 loader，布局还是使用 rpx 作为主要单位。
5. 生命周期函数建议使用 小程序的生命周期函数，如 onLoad, onUnload, onShow, onHide。
6. JS API 使用 uni.request() 这类 API ，各平台兼容性更好。

平台重点

我们主要用 uni-app 开发微信小程序，顺便兼容其他平台。

使用 less 预处理器

1. 安装less 和 less-loader

// 安装 less 和 less 文件加载器
npm install less less-loader

1. style标签添加 lang="less"，表示使用less语法写样式。

<style lang="less">

</style>

解决 app id报错