@2021SC@SDUSC

WebStorm开发微信小程序(uniapp)

创建项目

采用cli方式创建的项目

vue create -p dcloudio/uni-preset-vue my-project
采用HBuilderX创建的项目

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

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

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

在项目执行下面两行命令生成d.ts
npm init
npm i @types/uni-app -D

基于WebStorm的运行配置

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

首先,下载微信开发者工具,并打开微信开发者工具的服务端口
配置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报错,格式化出问题

安装less支持

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

更改<style>为<style scoped lang="less" type="text/less">
利用正则替换 (\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

开发微信小程序(uniapp)相关推荐

uniapp开发微信小程序设置分包，简单易学（图解）
我们使用uniapp开发微信小程序的时候,当我们的包体积过大的时候,无法真机模拟因为小程序单个包只支持2MB,所以这时候我们要选择去分包. 有人要问了分包难吗?分包很简单.但是最重要的来了,分包这 ...
uni-app开发微信小程序使用微信小程序的插件
假如使用uni-app开发微信小程序需要用到官方插件----OCR插件, 插件地址如下: OCR插件申请方式见插件地址介绍.本文主要记录调用方式 1.在manifest.json的"mp- ...
Uni-app开发微信小程序使用本地图片做背景图
Uni-app开发微信小程序使用本地图片做背景图 <view class="content" :style="{backgroundImage:'url(' + i ...
uniapp开发微信小程序，从构建到上线
前言: 本文主要介绍 uniapp 的基础使用,以及使用 uniapp 在企业开发的过程中的一个详细流程,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考:使用 H ...
uniapp开发微信小程序分享功能
记一次uniapp开发微信小程序遇到的问题, 问题: 关于button的分享属性, 在HbuilderX中开发时,直接将button覆盖在image上,将button设置为透明,可以直接实现分享功能, ...
uniapp开发微信小程序-7.用户填写表单信息
uniapp开发微信小程序-7.用户填写表单信息本章让用户通过表单更新自己的个人信息,也是本系列文章最后一篇入门分享,之后碰到新颖.常用的功能会继续分享给大家,如果大家有任何问题欢迎留言,我会尽快线 ...
uni-app开发微信小程序使用腾讯地图选点和城市选择器插件
文章目录前言效果图第一步.登录腾讯地图申请属于自己小程序的key 第二步.登录微信公众平台添加插件第三步.引入插件包,配置定位允许授权第四步.通过点击事件使用插件第五步.拿到插件接口返回的 ...
uniapp开发微信小程序使用painter绘制海报
uniapp开发微信小程序使用painter绘制海报参考文章: 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://bl ...
使用uni-app开发微信小程序
文章目录 1.uni-app框架介绍 2.布置开发环境 3.理论基础 3.1开发规范 3.2目录结构 3.3组件 3.4 常用API 4.开发实践 4.1页面相关 4.1.1页面生命周期 4.1.2创 ...

开发微信小程序(uniapp)