开发微信小程序(uniapp)

Posted 2022-01-04 alphahao

@2021SC@SDUSC

WebStorm开发微信小程序(uniapp)

创建项目

1. 采用cli方式创建的项目

   vue create -p dcloudio/uni-preset-vue my-project

2. 采用HBuilderX创建的项目

   在点击工具栏里的文件 -> 新建 -> 项目：

   

   选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

HBuildX创建的项目可能缺少d.ts

在项目执行下面两行命令生成d.ts

npm init
npm i @types/uni-app -D

基于WebStorm的运行配置

对于HBuilderX可以通过工具栏直接启动调试,但是WebStorm是不支持的,所以需要进行一些配置

1. 首先,下载微信开发者工具,并打开微信开发者工具的服务端口

   

2. 配置WebStorm的Run/Debug Configuration

   • 新建Configuration,并选择npm,设置Command为run,Scripts为dev:mp-weixin(其他平台小程序基本同理)

     

   • 再新建一个Configuration,选择Shell Script

     • Execute选择Script text

     • ScriptText 内容如下(这里是windows下示例)

       powershell版本

       Start-Process -FilePath "cmd.exe" -ArgumentList "/k ""C:\\Program Files (x86)\\Tencent\\微信web开发者工具\\cli.bat""","open","--project","D:\\Project\\uni-app\\beautify-avatar\\dist\\dev\\mp-weixin","&exit"
       

       cmd版本

       "C:\\Program Files (x86)\\Tencent\\微信web开发者工具\\cli.bat" open --project "D:\\Project\\uni-app\\beautify-avatar\\dist\\dev\\mp-weixin" & exit
       

       cli.bat是微信小程序开发工具安装目录里的，project之后的参数，是你的项目文件夹的’\\dist\\dev\\mp-weixin’文件夹（不存在也没关系，第一遍编译会自动生成）

     

   • 运行时先运行第一步配置的npm，再运行第二步配置的Shell Script

运行项目

基础的官网教程

如果按照上面的配置好了WebStorm，运行时先运行第一步配置的npm，再运行第二步配置的Shell Script就可以了

支持热更新哦,在webstorm里修改可以在开发工具里显示

Vue中rpx报错,格式化出问题

1. 安装less支持

   npm install less -S
   npm install less-loader -S
   

2. 更改<style>为<style scoped lang="less" type="text/less">

3. 利用正则替换 (\\d*)rpx => unit($1, rpx)替换已有rpx

UniApp中不能使用VueRoute的问题

uniapp不能直接使用Vue-Route,可以用uni-simple-router替代

• 安装uni-simple-router

  npm install uni-simple-router

• 或者采用uniapp自带的uni.navigateTo(url: 'xxx')

一些问题

1.uniapp不能直接使用Vue-Route,可以用uni-simple-router替代

npm install uni-simple-router