精华内容
下载资源
问答
  • uniapp开发微信小程序支付 1、申请接入微信支付 打开微信公众平台申请接入微信支付:https://mp.weixin.qq.com/ 2、调用统一下单和微信支付接口 uni.login({ success: (e) => { console.log("login ...

    uniapp开发微信小程序支付

    1、申请接入微信支付

    打开微信公众平台申请接入微信支付:https://mp.weixin.qq.com/

    2、调用统一下单和微信支付接口

    uni.login({
    					success: (e) => {
    						uni.request({
    							url: '',
    							data: {
    								openId: this.$store.state.openId,
    								attach: this.attachList.join('&'),
    								orderNote: this.stakeName,
    								finalCost: this.totalCost
    							},
    							method: 'POST',
    							header: {
    								'content-type': 'application/json'
    							},
    							success: (res) => {
    								if (res.statusCode !== 200) {
    									uni.showModal({
    										content: "支付失败,请重试!",
    										showCancel: false
    									});
    									return;
    								}
    								if (res.data.code === 0) {
    									console.log("得到接口prepay_id", res.data.data);
    									let paymentData = res.data.data;
    									uni.requestPayment({
    										timeStamp: paymentData.timeStamp,
    										nonceStr: paymentData.nonceStr,
    										package: paymentData.package,
    										signType: 'MD5',
    										paySign: paymentData.paySign,
    										success: (res) => {
    											uni.showToast({
    												title: "支付成功!"
    											});
    										},
    										fail: (res) => {
    											uni.showModal({
    												content: "支付失败",
    												showCancel: false
    											})
    										},
    										complete: () => {
    											this.loading = false;
    										}
    									})
    								} else {
    									uni.showModal({
    										content: res.data.msg,
    										showCancel: false
    									})
    									this.loading = false;
    								}
    							},
    							fail: (e) => {
    								console.log("fail", e);
    								this.loading = false;
    								uni.showModal({
    									content: "支付失败,原因为: " + e.errMsg,
    									showCancel: false
    								})
    							}
    						})
    
    					},
    					fail: (e) => {
    						console.log("fail", e);
    						this.loading = false;
    						uni.showModal({
    							content: "支付失败,原因为: " + e.errMsg,
    							showCancel: false
    						})
    					}
    				})
    
    展开全文
  • uniapp开发微信小程序canvas动画入门前言效果预览页面代码结论 前言 老版的微信小程序canvas接口由于是视图层和逻辑层双线程的关系,动画效果很卡,而且api都是为了标新立异,重新包装H5的,学习起来也要再花时间. 2.9.0...

    uniapp开发微信小程序canvas动画入门

    前言

    老版的微信小程序canvas接口由于是视图层和逻辑层双线程的关系,动画效果很卡,而且api都是为了标新立异,重新包装H5的,学习起来也要再花时间.
    2.9.0版之后终于与H5的接口同步了,并且性能也得到了极大的优化,简单的动画在移动端运行起来还是非常流畅的.
    大家在很多网页上都见过粒子飘来飘去的动画,有点物联网的感觉…
    下面使用uniapp开发环境实现一个微信小程序端的粒子动画背景,app端不支持新版的接口,运行会报错.

    粒子动画参考代码

    效果预览

    在这里插入图片描述
    此截图是在开发者工具上录的,实际上没有那些灰色的块块
    新版的canvas接口支持同层渲染,所以只需要将canvas层的z-index调到下面就行了.
    真机预览下小球球是在其他元素下面的,不会影响主要元素.

    页面代码

    <template>
    	<view>
    		<view class="container">
    			<view class="login-header">
    				<!-- <img src="/static/login.png" alt=""> -->
    				<view>XXXXX系统</view>
    			</view>
    			<view class="uni-form-item uni-column">
    				<input class="uni-input" focus placeholder="用户名" v-model="user" @input="userChange" />
    			</view>
    			<view class="uni-form-item uni-column">
    				<input class="uni-input" password type="text" placeholder="密码" v-model="pass" @input="passChange" />
    			</view>
    			<br>
    			<button class="loginBtn" type="primary" @click="onLogin">登录</button>
    		</view>
    		<canvas type="2d" id="myCanvas"></canvas>
    	</view>
    </template>
    
    <script>
    	
    	import Circle from './circle.js' 
    	
    	export default {
    		data() {
    			return {
    				user: 'xxxxxxx',
    				pass: '123456'
    			}
    		},
    		onReady: function (e) {
    		    const query = uni.createSelectorQuery()
    			query.select('#myCanvas')
    			  .fields({ node: true, size: true })
    			  .exec((res) => {
    				const canvas = res[0].node
    				const ctx = canvas.getContext('2d')
    				const sysInfo = uni.getSystemInfoSync()
    				const dpr = sysInfo.pixelRatio
    				canvas.width = res[0].width * dpr
    				canvas.height = res[0].height * dpr
    				ctx.scale(dpr, dpr)
    		
    				let circles = []
    				let width = sysInfo.windowWidth
    				let height = sysInfo.windowHeight
    				let num = 50
    				
    				for (let i = 0; i < num; i++) {
    				    let circle = new Circle(Math.random() * width, Math.random() * height, width, height)
    				    circles.push(circle)
    				}
    				function draw(num) {
    					ctx.clearRect(0, 0, width, height)
    					for (let i = 0; i < num; i++) {
    						circles[i].drawCircle(ctx)
    						for (let j = i + 1; j < num; j++) {
    							circles[i].drawLine(ctx, circles[j])
    						}
    						circles[i].move()
    					}
    				}
    				setInterval(()=> {
    					draw(num)
    				}, 33)
    			 })
    		},
    		
    		methods: {
    			userChange: function(e) {
    				this.user = e.detail.value
    			},
    			passChange: function(e) {
    				this.pass = e.detail.value
    			},
    			onLogin: function(e) {
    				
    			}
    	},
    	}
    </script>
    
    <style lang="scss" scoped>
    	#myCanvas {
    		position: absolute;
    		left: 0;
    		top: 0;
    		width: 100%;
    		height: 100%;
    		z-index: -1;
    	}
    	.container {
    		padding: 15px;
    		// font-size: 14px;
    		// line-height: 24px;
    	}
    	input {
    		padding: 15px 0;
    		border-bottom: 1px solid #C0C0C0;
    	}
    	.loginBtn {
    		background-color: $my-primary;
    	}
    	/* #ifdef MP-WEIXIN */
    	.loginBtn {
    		margin-top: 25px;
    	}
    	/* #endif */
    	.login-header {
    		text-align: center;
    		font-size: 18px;
    		margin-bottom: 10px;
    		img {
    			width: 100px;
    			height: 41px;
    		}
    	}
    </style>
    

    下面是circle.js的代码

    class Circle {
    	constructor(x, y, width, height) {
    		this.x = x
    		this.y = y
    		this.r = Math.random() * 10
    		this._mx = Math.random()
    		this._my = Math.random()
    		this.width = width
    		this.height = height
    	}
    	drawCircle(ctx) {
    		ctx.beginPath()
    		ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
    		ctx.fillStyle = 'rgba(204, 204, 204, 0.3)'
    		ctx.fill()
    		ctx.closePath()
    	}
    	drawLine(ctx, _circle) {
    		let dx = this.x - _circle.x
    		let dy = this.y - _circle.y
    		let d = Math.sqrt(dx * dx + dy * dy)
    		if (d < 70) {
    			ctx.beginPath()
    			ctx.moveTo(this.x, this.y)
    			ctx.lineTo(_circle.x, _circle.y)
    			ctx.strokeStyle = 'rgba(204, 204, 204, 0.5)'
    			ctx.stroke()
    			ctx.closePath()
    		}
    	}
    	move() {
    		this._mx = (this.x < this.width && this.x > 0) ? this._mx : (-this._mx)
    		this._my = (this.y < this.height && this.y > 0) ? this._my : (-this._my)
    		this.x += this._mx
    		this.y += this._my
    	}
    }
    
    export default Circle
    
    

    移动端没有鼠标,关于鼠标那部分的粒子球代码就去掉了.
    小程序官方文档里是有requestAnimationFrame这个接口的,但我试了一下,用上以后也不报错也不会动…
    所以只能用setInterval了,33毫秒重绘一次,也就是一秒钟30帧,看起来已经很流畅了.
    在这里插入图片描述

    结论

    这个粒子球跑来跑去加连线的动画有点物联网的感觉,有木有?
    把代码放到自己的项目里跑一跑,修修改改试一试,小程序端的canvas开发也就入门了.
    浏览器端的canvas库什么的就别指望了,在小程序里用起来很麻烦.老老实实用原生的接口,做个简单的功能还不算太难.
    写canvas代码的精髓:就把它想象成一张一张的图画,然后把重绘代码放到定时器里.如下图:
    在这里插入图片描述

    展开全文
  • uniapp开发微信小程序开发注意事项 在template中不要使用复杂的逻辑代码,尤其是在v-for做判断时,尽量用方法替代 在template中不要直接出现空字符串,空对象,使用变量去替代 若拉取的代码一致,但有一方报错,...

    uniapp开发微信小程序开发注意事项

    1. 在template中不要使用复杂的逻辑代码,尤其是在v-for做判断时,尽量用方法替代
    2. 在template中不要直接出现空字符串,空对象,使用变量去替代
    3. 若拉取的代码一致,但有一方报错,可能问题出在微信开发者工具上,比如在详情页中本地设置的调试基本库不同。
    4. 小程序开发中不允许对DOM和BOM的操作,不要使用类似jQuery,zepto等库
    5. 严格表明样式的类型,尤其是在使用sass、less等情况下
    6. button按钮不能自定义样式,因为你写了type属性,只要不写type属性,可随意变更button样式
    7. 不能跳转页面的时候记得查看一下跳转的页面是否是tabBar页面,如果是,只能用switchTab来跳转
    8. 如果主包和分包都要用到的公共资源都大于了2M,只能想办法将能用远程的公共资源都放到远程里面
    9. “errcode”:40029代表appid出现问题,检查前后台是否一致,或者重新创建一下项目,以及检查一下后台的APPID和AppSecre的参数配置
    10. “errcode”: 48001代表小程序没有授权
    11. json文件中 不能有注释,否则编译不通过
    12. 当打印数据显示[object Object],可以去掉拼接字符串,直接打印结果
    13. 目前小程序分包大小有以下限制:整个小程序所有分包大小不超过 20M,单个分包/主包大小不能超过 2M
    14. 组件中使用v-if不能用===,只能用==。
    15. 关闭sitemap索引提示。sitemap 的索引提示是默认开启的,如需要关闭 sitemap 的索引提示,可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false
    16. app.js调用页面的方法。页面调用app的方法可以通过getApp()获取全局的app实例调用,app.js调用页面的方法就是在app.js定义全局变量,然后在页面onload后将页面对象this赋值给这个全局变量供app.js调用这个全局变量的方法或者属性值
    17. 每个storage大小限制为1M,总共10M
    18. 脚本文件里data的数据,在更新的时候要通过this.setData()方法来更新,而不能直接用“=”来做。
    19. 小程序里也存在事件的冒泡,如果希望事件向上冒泡,则使用bind来绑定事件,若希望阻止事件冒泡,就使用catch来进行事件绑定。
    20. 小程序支持文件引用,有import和include两种方式,import有作用域,也就是引入的目标文件里import的模板不会被引入;而include等于是将目标文件除以外的整个代码进行引入。
    21. 小程序的周期函数不能用在子组件里面,要用到父组件里面
    22. v-for循环一定要指定index,要添加 :key 属性,否则在微信可能出问题
    23. 页面报错“Page is not constructed because it is not fond”。原因:页面中有语法错误,导致解析报错;比如动态属性留空,就会报这个错。
    展开全文
  • uniapp开发微信小程序获取用户信息 <button type="default" open-type="getUserInfo" @getuserinfo="getuserinfo()">获取用户信息</button> getuserinfo() { uni.getUserInfo({ provider: 'weixin',...

    uniapp开发微信小程序获取用户信息

    <button type="default" open-type="getUserInfo" @getuserinfo="getuserinfo()">获取用户信息</button>
    
    getuserinfo() {
    	uni.getUserInfo({
    		provider: 'weixin',
    		success: (infoRes) => {
    		console.log(infoRes.userInfo);
    	},
      });
    }
    
    展开全文
  • uniapp开发微信小程序获取用户手机号-链接 功能描述:微信小程序,点击微信第三方登录,获取到当前用户绑定的手机号与openId(或unionid),请求后端接口实现登录。 功能拆分逻辑: 点击某个按钮,弹出请求微信...
  • uniapp开发微信小程序从入门到上手

    千次阅读 2021-02-05 16:08:47
    关于uniapp开发微信小程序的那些事开发工具和配置HbuildX功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、...
  • uniapp 开发微信小程序订阅消息功能记录 如图 注意事项: 1.开发者工具尽量 是 最新的 2.调试基础库在 2.10.0 以上 3.用户需要点击“总是保持以上,不再询问”,才可以获取到getSetting返回的用户授权信息 4.微信...
  • uniapp开发微信小程序踩过的坑自定义导航栏 自定义导航栏 这里的坑是自定义导航栏在电脑上不支持,如果以后会在电脑上打开微信小程序,需要判断客户端环境。 微信小程序本来是有默认导航栏的,想要自定义导航栏,...
  • 最近使用uniapp 开发微信小程序的时候,,发现实现分享转发的话,要每个页面都写一个 onShareAppMessage,这样代码太臃肿,因此想起使用vue的mixins 可以设置一个全局的分享 vue相关混入 (mixin)的网址:...
  • uniapp开发微信小程序/APP,隐藏其中某个页面的原生导航栏,需要在pages.json中设置如下代码: { "path": "feedback/feedbackSuccess",//页面路径 "style": { "navigationBarTitleText": "反馈",//导航栏显示的...
  • <p>uniapp开发微信小程序,通过插件tki-qrcode生成的页面二维码,用户扫二维码进入小程序页面, 那二维码绑定的小程序页面的是链接?链接是怎么生成的啊</p>
  • uniapp开发微信小程序实现顶部固定,其他地方滚动,也就是滚动条不出现在头部,只出现在腰部。 效果图是这样的: 1、页面 <view class="alarm" :style="'background:'+ (showFilter ? 'rgba(0,0,0,0.45)' :'')"&...
  • uniapp开发微信小程序时,使用uni.downloadFile下载图片在苹果手机可以正常下载,安卓手机就会报报错unknown问题 解决办法:使用指定保存路径的办法,设置filePath,代码如下 uni.downloadFile({ url: ctx + '/f/...
  • 当使用uniapp开发微信小程序时,对接口请求进行 promise 加 async/await 封装时 接口请求可以发送,在network中也可以看到接口请求但是就是拿不到 wx.request 或 uni.request 的 success fail complete 三个参数 ...
  • 最近PC端项目基本完工了,在开发小程序了,虽然他们说会vue就好做。 一直都听他们说uniapp如何如何牛逼,也没有去研究。最近感觉还是要去学习下了,岁数大了,也没人指点下,的确有点累。。。 下载好HBuilderX ...
  • 立即购买button> toResult(){ let _this = this console.log(_this.data.cardId) console.log(_this.shopId) let data={ cardId: ... } }) } uniapp文档:https://uniapp.dcloud.io/api/plugins/payment
  • 1、配置APPID(在微信开发者工具中申请获取) 2、首页中配置初始化云开发(在onLoad方法...环境ID在微信开发中工具云开发中查询,见下图所示: 上面的事例为给user数据库中添加一条记录。 效果如下图: ...
  • uniapp 开发微信小程序——获取openid

    万次阅读 2019-07-23 09:59:35
    1、初始化微信云函数 //初始化微信云函数 wx.cloud.init({ // 此处请填入环境 ID, 环境 ID 可打开云控制台查看 env: '********', traceUser: true, }) 2、调用云函数 // 调用云函数...
  • 项目需要用uniapp开发微信小程序,其中,有一个功能是预览pdf, 后台以链接形式返回pdf地址,一开始使用web-view做链接跳转,但是出现ios文件可以正常打开,android打不开的情况,本来想用pdf.js做,后来发现微信...
  • 4、获取小程序测试号,填入项目下的manifest.json文件 5、以上配置结束后,运行至微信开发者工具即可。 二、报错及原因 1、init error: { Error: ENOENT: no such file or directory, open 'C:\Users\Admin\A
  • 原因:微信小程序中,button按钮的层级较高,在调用底层api时使用,比如微信小程序的分享功能就必须是<button>按钮,设置open-type="share"属性调用方法。 也因此在微信小程序中,button按钮的表现形式有时会...
  • uniapp开发微信小程序支付功能

    千次阅读 2020-06-03 17:30:51
    使用uniapp开发项目过程中有支付功能需要获取小程序的openid,查阅相关文档需要使用wx.login(Object object)调用接口获取登录凭证(code),获取code之后无法直接生成openid,需要将code传给后台,通过后台调用auth....
  • uniapp开发微信小程序登陆注册

    千次阅读 2020-05-10 21:01:22
    } 注意:先获取用户手机号(要先检查用户登陆信息是否过期),再获取用户信息 微信小程序文档:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.checkSession.html uniapp文档:...
  • 原因:开发微信小程序因为主包太大上传不到微信后台,分包处理,中间因为没有仔细看文档出现static找不到的问题! 注意上边这句话,配置路由的时候把路径匹配对就好了。 ...
  • npm i mqtt@2.18.8
  • 二、创建项目之后下载并安装微信小程序SKD: 如果是开发安卓、IOS、APP项目,请找到对应的包下载并解压。 下载微信小程序SDK 解压后得到 amap-wx.js 文件,在创建的项目中,新建一个名为 libs 目录,将 amap-wx.js ...
  • 相同的代码在网页中没问题,在微信开发工具中却报错 百度又搜索不到 VM4473:1 (in promise) MiniProgramError Request failed with status code undefined Error: Request failed with status code undefined ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,141
精华内容 2,056
关键字:

uniapp开发微信小程序

微信小程序 订阅