正文 

当前位置： 首页 > IT > java教程

开发微信小程序(uniapp)(代码片段)

alphahao alphahao     2023-02-26     546

关键词：

@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

开发微信小程序(uniapp)(代码片段)

@2021SC@SDUSCWebStorm开发微信小程序(uniapp)创建项目采用cli方式创建的项目vuecreate-pdcloudio/uni-preset-vuemy-project采用HBuilderX创建的项目在点击工具栏里的文件->新建->项目：选择uni-app类型，输入工程名，选择模板... 查看详情

uniapp开发微信小程序，从构建到上线(代码片段)

...过程中的一个详细流程，比较适合第一次使用uniapp开发微信小程序的伙伴，或者没有过实战经验的小伙伴参考；使用Hbuildx配合Uniapp框架结合Uview的UI框架为大家演示今天的Demo！  目录一、uniapp项目起步1.工具下载2... 查看详情

uniapp开发微信小程序自定义顶部导航栏(代码片段)

自定义导航栏渐变色，先上效果 使用uniapp开发小程序，在不同界面，要去对页面进行修改顶部导航栏。比如说要去定义导航栏的背景颜色，常规的去定义导航栏背景颜色全局定义导航栏"window":"navigationBar... 查看详情

小程序地图uniapp开发微信小程序，显示地图功能，且点击后打开高德或腾讯地图。(代码片段)

最开始遇到地图这块的时候，想的比较复杂。想到是不是需要引用高德或者百度地图api之类的。其实完全没必要，使用uniapp自带的方法uni.openLocation即可。话不多说，完整代码、注释、以及开发中遇到的问题如下所示&#... 查看详情

uniapp开发微信小程序设置字体踩坑记录(代码片段)

最近接到一个需求，需要在微信小程序中做出用户可自定义缩放旋转图片和文字的定制功能，开发使用uni-app，这里记录几个问题。一、canvas设置字体大小的数值需为整数使用canvas渲染文字时，需要设置文字的字体... 查看详情

uni-app开发微信小程序使用微信小程序的插件(代码片段)

假如使用uni-app开发微信小程序需要用到官方插件----OCR插件,插件地址如下：OCR插件申请方式见插件地址介绍。本文主要记录调用方式1.在manifest.json的“mp-weixin”里添加"plugins":"ocr-plugin":"version":"3.0.1",... 查看详情

uni-app.11.开发微信小程序实现消息订阅(代码片段)

开发微信小程序实现消息订阅使用场景订阅消息一次性订阅消息长期订阅消息实现步骤1.获取模板ID2.uni.requestSubscribeMessage3.subscribeMessage.send4.测试使用场景在我们开发的小程序中司机首次登录需要先认证从业资质和车辆。司机在... 查看详情

uniapp开发微信小程序富文本编辑器（样式仿腾讯文档）

参考技术A照着腾讯文档小程序开发了微信小程序富文本编辑器组件，这几天做个整理，如有这个需求可以前往腾讯文档小程序操作看看实际效果。毕竟参照的是微信自家小程序，无法做到百分百效果，只能按现有开放api尽可能... 查看详情

使用vscode开发微信小程序(代码片段)

.MathJax,.MathJax_Message,.MathJax_Previewdisplay:none使用VSCode开发微信小程序微信开发工具结构缺点VSCodeVSCode下载插件Chinese小程序开发助手Easylessminappvscodewxmlwechat-snippet中文乱码处理配置Easyless说明 微信开发工具说归说，但是开发微信... 查看详情

uniapp微信小程序video视频监听播放时间(代码片段)

uniapp微信小程序video视频监听播放时间使用uniapp开发微信小程序，需要实现这样的需求当我用户离开页面的时候，我就要记录下用户视频播放的那个地方然后第二次进来，接着离开时候的地方播放uniapp中video提供的方... 查看详情

uni-app开发微信小程序使用腾讯地图选点和城市选择器插件(代码片段)

...件，报错请设置key授权本小程序appId报错2前言因为开发微信小程序，所以我这里用的是腾讯地图选点插 查看详情

uni-app开发微信小程序使用腾讯地图选点和城市选择器插件(代码片段)

...件，报错请设置key授权本小程序appId报错2前言因为开发微信小程序，所以我这里用的是腾讯地图选点插 查看详情

uniapp微信小程序获取屏幕宽高(代码片段)

uniapp开发微信小程序的时候，有时候去调整样式你需要适配各种手机屏幕，使用，你的样式宽高就不能使用rpx  有的朋友觉得可以使用vw vh %  是的，当然可以但是要让你的元素，宽高，比如50%再去加上2... 查看详情

开发微信小程序getlocation，需要在app.json中声明permission字段解决办法(代码片段)

问题：微信小程序开发中，使用wx.getLocation()时，开发者工具提示需要在app.json中声明permission字段。解决方法：//在app.json文件中进行配置"permission":"scope.userLocation":"desc":"获取你当前位置信息用... 查看详情

开发微信小程序getlocation，需要在app.json中声明permission字段解决办法(代码片段)

问题：微信小程序开发中，使用wx.getLocation()时，开发者工具提示需要在app.json中声明permission字段。解决方法：//在app.json文件中进行配置"permission":"scope.userLocation":"desc":"获取你当前位置信息用... 查看详情

开发微信小程序getlocation，需要在app.json中声明permission字段解决办法(代码片段)

问题：微信小程序开发中，使用wx.getLocation()时，开发者工具提示需要在app.json中声明permission字段。解决方法：//在app.json文件中进行配置"permission":"scope.userLocation":"desc":"获取你当前位置信息用... 查看详情

开发微信小程序要下载git吗

参考技术A你好，开发微信小程序不需要下载git。微信小程序管理后台只有一个管理员可以登录，可以同时绑定10个开发者和20个体验者，开发者们可以通过版本管理工具（比如SVN或者Git等）共同开发，但是向微信后台提交代码只... 查看详情

华为云：基于appcube零代码开发微信小程序(代码片段)

写在前面分享一个华为云开发微信小程序产品AppCube通过AppCube可以基于零代码或者低代码开发微信小程序免费版支持试用，可以一键发布分享。免费版支持最多9个用户使用。如果是小团队，赶快来褥羊毛吧博文内容为ÿ... 查看详情