开发环境和选型

现在开发小程序，流行的有：

1、XX小程序开发工具
如百度、微信、支付宝、钉钉等，都有自己的原生的开发工具；
缺点：可能不互通，也就是微信小程序只能在微信上运行；语法规则不同公司的可能会不一样。

2、uni-app
由HBuildX公司dcloud开发的uni-app 小程序，用Vue编写，一次可以打包到多个小程序平台上发布，不用每个公司都写一次。

官网：https://uniapp.dcloud.net.cn/

========================

安装

1、安装NodeJS

https://www.yuque.com/yejielin/mypn47/wwz0am

后面创建项目是以NodeJS自带的npm为基础的，因此需要安装NodeJS

2、安装HBuilderX

https://www.dcloud.io/hbuilderx.html

创建项目（Vue3）

说明

Uni-app已经支持Vue3 和 Vue3的composition API，这里创建Vue3 小程序项目。

目前小程序，仅支持 cli 方式创建支持 vue3 默认模板项目，不支持Vite，可能是因为Vite打包后的文件夹有关，期待后续发展。

官方的教程可查看：https://ask.dcloud.net.cn/article/id-37834

1、全局安装vue-cli

打开控制台 （cmd，也叫命令行工具），输入 

  1. npm install -g @vue/cli

2、创建Uni-App的vue3工程

windows环境下，找到你想要存放这个项目的文件夹，然后在上面地址栏上输入cmd，打开命令行工具，这样做同时会设置好前面的路径
image.png image.png

然后输入 

  1. vue create -p dcloudio/uni-preset-vue#vue3 my-vue3-project

这里的my-vue3-project，是你项目的名字，可以随意更改

安装过程中会询问，是默认的项目（JS），还是用TypeScripts的项目，按你个人选择。

3、打开HBuilderX，导入项目

image.png

4、安装小程序模拟器

打开HBuilderX，左边点一下项目目录，然后点击运行，运行到小程序模拟器，点击运行设置，可以查看各个平台的模拟器下载地址
image.png
image.png

5、打开小程序服务端口

这里以微信小程序为例。

打开小程序，点右上角的齿轮设置，打开服务端端口，这样HBuilderX才能调用小程序模拟器运行项目。
image.png

6、设置模拟器路径

打开HBuilderX，左边点一下项目目录，然后点击运行，运行到小程序模拟器，点击运行设置
image.png
输入你下载的模拟器的安装路径，以便HBuilderX访问这个路径去调用小程序模拟器。
image.png

7、模拟器运行

通过HBuilderX运行项目即可，上面的是从项目默认的页面进入，下面的是单独运行某个页面。
image.png
点击后，HBuilderX就会调用模拟器，把文件放到模拟器上运行，模拟器要编译（下图提示），因此要等一小段时间（1-2分钟），编译好后自动会显示
image.png
image.png

8、安装和配置VueX

Uni-App自带Vuex3，但由于项目是Vue3的，对应的应该是要使用Vuex4才对，你按Vuex3来配置会报错，因此需要给项目安装Vuex4
image.png HBuilderX 左侧点击一下项目目录，再点下面的终端按钮，可以快速打开命令控制台
然后输入下面代码，安装VueX

  1. npm i vuex@next

安装完后，项目根目录下的src目录，创建store文件夹，里面创建 index.js 文件
image.png
index.js中输入

  1. // 1、引入vuex 的方法createStore
  2. import { createStore } from 'vuex'
  4. // 2、创建state 数据管理池
  5. const state = {
  6.   message: "Hello Uni-app"
  7. };
  9. // 3、创建store仓库
  10. const store = createStore({
  11.   state,
  12. })
  14. // 4、导出模块到全局
  15. export default store;

然后src文件夹下的 main.js 改为：

  1. import {
  2.   createApp
  3. } from 'vue'
  5. import App from './App.vue'
  7. // 引入 Vuex 的index文件夹
  8. import store from './store/index.js'
  10. createApp(App)
  11. .use(store) // 加载Vuex这个模块
  12. .mount()

最后在页面中使用：
src/pages/index/index.vue

  1. <template>
  2.   <view class="content">
  3.     <image class="logo" src="/static/logo.png"></image>
  4.     <view>
  5.       <text class="title">{{ title }} 5、在这里使用Vuex {{ message }}</text>
  6.     </view>
  7.   </view>
  8. </template>
  10. <script>
  11.   // 1、引入vuex 的useStore方法
  12. import { useStore } from 'vuex';
  14. export default {
  15.   setup() {
  16.     // 2、使用useStore，获取Vuex实例
  17.     const store = useStore();
  19.     // 3、通过store.state获取状态（数据）
  20.     let message = store.state.message;
  22.     return {
  23.       title: 'hello',
  24.       message // 4、返回这个变量，给template使用
  25.     };
  26.   }
  27. };
  28. </script>
  30. <style>
  31. .content {
  32.   text-align: center;
  33.   height: 300upx;
  34.   padding:0upx 10upx;
  35. }
  37. .logo {
  38.   height: 200upx;
  39.   width: 200upx;
  40.   margin-top: 200upx;
  41. }
  43. .title {
  44.   font-size: 36upx;
  45.   color: #8f8f94;
  46. }
  47. </style>

如下图，没有报错，可以正常用
image.png

9、其他

AppID

如果提示没有AppID，就打开模拟器点击创建项目，选择测试号即可
image.png

路由

小程序有自己的路由规则，无法使用Vue Router

注意事项（重要）

官方关于Vue3版本的Uni-app注意事项
image.png