uni-app，多端开发

古城微笑少年丶 2022-12-29 11:25 146阅读 0赞

# cli工程 #

一、全局安装vue-cli 3.x （如已安装请跳过此步骤）  
`npm install -g @vue/cli`  
二、通过cli创建uni-app项目  
`vue create -p dcloudio/uni-preset-vue my-project`

## vscode打开项目 ##

一、安装vue语法提示插件Vetur （Pine Wu）  
二、CLI工程默认带了uni-app语法提示和 h5 + app语法提示  
三、安装组件语法提示  
`npm i @dcloudio/uni-helper-json`  
三、导入HBuilderX 自带的代码块  
从github下载uni-app代码块，放到项目目录下的.vscode目录即可拥有和HBuilderX一样的代码块。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 1]

## 运行项目 ##

`npm run dev:%PLATFORM%`  
一、%PLATFORM%取值

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>平台</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>h5</td> 
   <td>H5</td> 
  </tr> 
  <tr> 
   <td>mp-alipay</td> 
   <td>支付宝小程序</td> 
  </tr> 
  <tr> 
   <td>mp-baidu</td> 
   <td>百度小程序</td> 
  </tr> 
  <tr> 
   <td>mp-weixin</td> 
   <td>微信小程序</td> 
  </tr> 
  <tr> 
   <td>mp-toutiao</td> 
   <td>头条小程序</td> 
  </tr> 
  <tr> 
   <td>mp-qq</td> 
   <td>qq小程序</td> 
  </tr> 
 </tbody> 
</table>

## 发布项目 ##

`npm run build:%PLATFORM%`

# hbuilder打开项目 #

一、安装插件  
1、插件市场：https://ext.dcloud.net.cn/?cat1=1&cat2=11  
2、插件：scss/sass编译  
二、微信开发者工具，设置-安全设置，服务端口，打开  
![在这里插入图片描述][20201224095205542.png]

三、项目manifest.json中，微信小程序配置，AppId可以选择测试号  
1、微信开发者工具，获取到测试号，获得测试号后点“取消”  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 2]  
2、把获取到的测试号填到项目中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 3]  
四、项目加载比较慢，耐心等一下，不要看到是空白就以为没有运行成功。

## 报错 ##

一、  
1、报错：预编译器错误：代码使用了scss/sass语言，但未安装相应的编译器插件，请前往插件市场安装该插件:  
![在这里插入图片描述][20201222142756348.png]  
2、解决办法  
（1）点击工具选项，然后点插件安装  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70]: /images/20221120/7ae6905657a645f8b87c18e821ed9ac1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/fffc4561896f4f3893b058c275c88819.png
[20201224095205542.png]: https://img-blog.csdnimg.cn/20201224095205542.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201222153228868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201222153130913.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[20201222142756348.png]: https://img-blog.csdnimg.cn/20201222142756348.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201222145829477.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020122214593327.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201222145950610.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ=,size_16,color_FFFFFF,t_70