Vue 微信小程序 uni-app学习系列《一》

最新推荐文章于 2024-06-12 11:53:58 发布
最新推荐文章于 2024-06-12 11:53:58 发布
阅读量1k 收藏 7
点赞数 3
分类专栏： 微信小程序 Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h356363/article/details/90314493
版权

下载开发工具

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

在这里插入图片描述

创建项目

文件–》项目

在这里插入图片描述

运行

在这里插入图片描述

下载微信小程序开发工具，并且完成安装

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

在这里插入图片描述

设置微信开发工具路径

C:/Program Files (x86)/Tencent/微信web开发者工具

在这里插入图片描述

打开小程序开发工具，设置服务端口，开启

在这里插入图片描述
在这里插入图片描述

安装插件

13:12:48.289 项目 ‘vuedemo’ 开始编译…
13:12:55.557 预编译器错误：代码使用了scss/sass语言，但未安装相应编译器，请在菜单工具-插件安装里安装相应编译插件 at components\uni-load-more\uni-load-more.vue:1
13:12:55.637 ERROR Build failed with errors.

在这里插入图片描述

微信小程序启动

在这里插入图片描述

启动成功

在这里插入图片描述

手机预览

查看app id
在这里插入图片描述

设置 app id

在这里插入图片描述

点击预览

在这里插入图片描述

潘多编程
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni app仿微信顶部导航条功能
01-19
最近一直在学习uni-app开发，由于uniapp是基于vue.js技术开发的，只要你熟悉vue，基本上很快就能上手了。 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明：app-plus配置，需注意 目前暂支持H5、App端，不支持小程序。 在page.json里配置app-plus即可 { path: pages/ucenter/index, style: { navigationBarTitleTe
Windows10&windows server 2012r2作为slave 用jenkins部署微信小程序自动化打包
ayu6_1的博客
01-18 1012
背景 微信小程序的测试发布在没有 CI/CD 等相关工具的情况下，存在着如下的问题： 小程序开发助手中，同一个开发者只能显示一个开发版本 测试同事、产品经理、UI设计师找开发要二维码，或者本地拉取代码后使用开发者工具打开，不方便且效率较低 本地生成的二维码会出现携带本地代码、未及时拉取分支其他改动等问题 为了避免如上问题的发生，采用微信小程序集成 Jenkins 的方案。想达到一个效果，开发人员只管往前写代码，提交代码，修改bug。而测试人员就通过jenkins自动打包和部署进行测试开发人员所做的功能和回归
UNIAPP写的H5以及APP跳转小程序
最新发布
weixin_53628933的博客
06-12 1097
3.H5页面跳转小程序的时候需要在小程序管理后台进行配置才可以进行跳转。配置的路径必须为线上路径才可以配置成功。4. 采用url scheme传值的时候必须要带上query才可以传过去。2. 注意写对type类型和对应路径。跳转小程序的时候id填写的是。
微信开发工具-命令行的使用
qq_26642611的博客
04-10 2430
F:\Program Files (x86)\Tencent\微信web开发者工具>cli.bat 上传： F:\Program Files (x86)\Tencent\微信web开发者工具>cli upload --project F:\svnUI\ui\commerce\plusMemberMini\trunk\dist --version 0.0.0.0.2.8 --desc ...
微信开发工具新版本黑屏的解决办法
qq_26642611的博客
04-10 3434
例如微信开发工具安装的位置是：f:\Program Files (x86)\Tencent\微信web开发者工具 cmd： f:\Program Files (x86)\Tencent\微信web开发者工具>.\微信开发者工具.exe --disable-gpu 原因是： 新版本默认开启了gpu加速，所以–disable-gpu 就可以了，然后在项目设置里面 把多核编译勾选去掉。 解决了...
uniapp系列-报错或常见问题处理集锦
热门推荐
tangdou369098655的博客
03-04 2万+
这里可以解决：尺寸自动转换,plus is not defined,打包wgt格式,未添加push模块,忽略版本号提示，禁止手指滑动缩放正常页面，获取app的版本号
微信小程序 uni-app wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分
09-01
【微信小程序 uni-app wxml-to-canvas】是一个用于在微信小程序中利用静态模板和样式来绘制canvas，并最终能够导出为图片的工具。这个技术在实际应用中特别适合用来生成分享图，即用户在社交平台上分享时看到的个性...
基于uni-app开发的微信小程序商城项目
08-03
此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网访问的方式，只局限做开发和测试...
微信小程序转 uni-app（系列一）
01-08
微信小程序转 uni-app一、搭建uni-app项目框架1、通过Hbuilder可视化界面1)下载安装2)创建uni-app3)运行uni-app2、通过vue-cli命令行1) 环境安装2) 创建uni-app3) 启动项目二、原生小程序迁移uni-app1、了解uni-app...
微信小程序-uni-app实现案例.zip
10-27
总的来说，"微信小程序-uni-app实现案例.zip"这个压缩包可能包含了一个使用uni-app开发的微信小程序实例，展示了如何利用uni-app进行多端开发，实现跨平台的功能和体验。通过学习和分析这个案例，开发者可以更好地...
uni-app使用微信小程序云函数的步骤示例
10-15
uni-app是一个多端开发框架，它允许开发者使用一套代码实现跨平台应用，包括iOS、Android、H5、微信小程序等。而微信小程序云函数则是在微信小程序平台上运行的后端逻辑，开发者可以在云端编写和执行代码，无需搭建...
uni-app 安装 scss 引发的报错
小鑫の随笔
12-07 2862
最近接手了一个有点历史的小程序，用 uni-app 开发的，没有装 css 预处理器，开发效率有点低，装好之后控制台报错了： 报错信息： Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: In
uni-app报错：Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/
前端泡面人
09-18 1万+
uni-app报错：Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/
uni-app发行微信小程序时报错
qq_38822141的博客
01-29 3593
uni-app发行微信小程序时报错： TypeError: Property value expected type of string but got null 翻译是：类型错误:属性值的预期类型的字符串，但得到null <view class="cu-item arrow" @tap="myApi.navigate(('home'))"></view> 多半是是因为调用方法时传入了错误的参数类型，‘home’ 写成了 (‘home’)，导致方法读取参数时无法识别，从而得到了nu
npm run build 报错，Build failed with errors
qq_45780380的博客
02-28 9885
npm run build 报错，Build failed with errors 执行完 npm run build 报错 这时候 npm run dev 启动一下 就会提示你安装某个依赖，并带有安装指令，接下来跟着指令安装就好了。之后再重新打包就ok了
uni-app运行项目时报错--解决办法
mxjwxhn的博客
10-06 1万+
报错信息： / 开始编译当前项目至 mp-weixin 平台… momopic@0.1.0 dev:mp-weixin D:\桌面\momopic ERROR Failed to compile with 1 errors 9:11:48 ├F10: AM┤ This dependency was no
在uniapp开发编译成小程序时,模板编译错误Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/
weixin_51614564的博客
10-05 9786
Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js): [HBuilder] 17:17:31.695 Error: Unbalanced delimiter found in string [HBuilder] 17:17:31.699 at Function.XRegExp.matchRecursive (D:\编程软件\HBuilderX\plugins\uniapp...
uniapp 搭建项目中遇到的报错简单记录
YZRHANYU的博客
11-16 444
uniapp 搭建项目中遇到的报错简单记录
使用uni-app开发微信小程序uni-shop的全面指南
uni-app 是一个使用 Vue.js 开发全平台应用的框架，它允许开发者通过编写一套代码，实现跨平台发布，覆盖 iOS、Android、H5 以及多个主流小程序平台，如微信、支付宝、百度、头条、QQ、钉钉和淘宝等，同时也支持快...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值