HTML 我是把canvas嵌套在view里并被view设置id <view id="canvas"> <canvas style="width: 350px; height: 530px;" canvas-id="firstCanvas"></canvas> </view> CSS 把它给顶出去 #canvas{ position: fixed; top: -9999999999999rpx; }

微信小程序中使用canvas会存在的一些问题: 由于小程序在绘制canvas的时候不能加载网络图片 所以需要把网络图片保存到本地之后再进行绘制 downLoadImg: function (netUrl, storageKeyUrl) { wx.getImageInfo({ src: netUrl, //请求的网络图片路径 success: function (res) { //请求成功后将会生成一个本地路径即res.path,然后将该路径缓存到storageKeyUrl关键字中 wx.setS

网络图片缓存 在uni中wx可以用uni代替 无区别: 先把要插入的网络图片缓存(getImageInfo); let context = uni.createCanvasContext('firstCanvas'); //canvas-id='firstCanvas' uni.getImageInfo({ src:https://xxxxxxxx, success:res=>{ console.log(`缓存地址:${res.path}`); context.drawImage(res.pat

canvas画布效果 官方文档:传送门 Page({ canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, onReady: function (e) { // 使用 wx.createContext 获取绘图上下文 context var context = wx.createCanvasContext('firstCanvas') //设置画笔的颜色 context.setStrokeStyle("#0

一.实战 HBuilderX:在微信小程序中运行页面,需要设置->安全 开启微信小程序服务端口,HBuilder工具->设置->配置程序路径 网络请求.模板语法.打开页面.页面传参 列表  api:  https://unidemo.dcloud.net.cn/api/news - 返回数据格式 - id 新闻id 如: 72980 - title 标题 - created_at 创建时间 - author_avatar 图标 详情  地址: https://unidemo.dcloud

使用https://github.com/givebest/GB-canvas-turntable代码移植过而来. 其它 微信小程序感觉是个半成品,代码移植过程比较繁琐麻烦.canvas API 部分都被重写了...canvas z-index不生效,永远在最上层,不支持rotate动画. 更多:点击打开链接

在微信小程序中 canvas drawImage API 传入的第一个参数是 imageResource 图片资源路径,这个参数通常由从相册选择图片 wx.chooseImage 或 wx.getImageInfo 获取图片信息来获得. 而 base64 格式图片数据,无法被 getImageInfo 直接调用,以下是解决方案: 首先使用 wx.base64ToArrayBuffer 将 base64 数据转换为 ArrayBuffer 数据 使用 FileSystemManager.write

学了东西还是要记录一下,刚入职的小萌新啊,运气好分到一个项目不是很急的组原以为时间多了可以多学一些东西,但是发现好像不知道从哪里开始下手,我太南了.... 看旁边的实习生同事一直在搞canvas,自己闲着也没有事做,也来画个简单的canvas吧. 自己的项目是做的微信小程序用的mp-vue(后端迟迟不给我接口数据,界面写好了就停滞不前了...),因此就直接尝试微信的canvas,之前没用过canvas,别批评我这个都不知道,其实就是有点懒,想着要用的时候再学,没想到兜兜转转自己还是来学了hhhh

登录微信小程序管理后台添加腾讯视频播放插件: 正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示: 在uni-app中引入插件代码: 注意在使用uni-app开发微信小程序时与直接会用微信网页开发工具开发微信小程序是有很大的差别的,因为uni-app可开发多平台的原因,因此不同平台的开发相应的配置需要放到指定的位置才能够生效.而uni-app引入腾讯视频小程序有两种方式一种是整个小程序可使用(小程序中所有的分包可以使用),第二种是指定对

一.使用Vue.js注意事项 Vue.js在uni-app中使用的差异: 新增:uni-app除了支持Vue实例的生命周期,还支持应用启动.页面显示等生命周期 受限:发布到H5时支持所有vue的语法, 在小程序和App端部分功能受限 生命周期:Vue实例生命周期+应用生命周期+页面生命周期 使用uni-app的onReady : 代替vue的mounted 使用uni-app的onLoad : 代替vue的created 注意:不要在选项属性或回调上使用箭头函数,比如 created: () =

一.初步认识 uni-app官网:https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址: http://www.dcloud.io/hbuilderx.html 选择版本: 下载App开发版,可开箱即用: 如使用cli方式创建项目,可直接下载标准版 创建uni-app: 工具栏里的文件 -> 新建 -> 项目 -> 选择uni-app,输入工程名 运行uni-app: 快捷键 ctrl+r 选择运行方式 显示项目目录:

按钮触发获取用户信息 uniapp中与微信小程序官网所写会不同, <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true">获取手机号码</button> 弹出授权用户绑定的账号 事件触发getPhoneNumber getPhoneNumber (e) { if(e.detail.errMsg==&

微信小程序授权是非常简单和常用的功能,但为了方便,还是在此记录一下要点: 首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件,把获取授权接口写到该事件里面去 <button class="sys_btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx&q

一.起步 1.1 配置uni-app开发环境 什么是uni-app,就是基于vue的一个开发框架,可以将我们写的一套代码,同时发布到ios.安卓.小程序等多个平台 官方推荐使用Hbuilderx来写uni-app项目 下载之后可以将预设改为vscode 进入hbuilder插件市场下载scss插件 1.2 初始化uni-app项目 创建一个uni-app项目 如果把小程序项目运行到微信开发者工具: 首先manifest.json配置自己的id 然后工具 设置 运行设置 找到微信开发者工具的安装路

触发代码 如: <button open-type="share">分享</button> 在JS中 分享进入页面传参,和微信小程序路由传参的思路是一样的. 如果return里的path为空,分享的则是当前页面. onShareAppMessage可不是写在生命周期里的,是和生命周期同一级的. 如: export default { onload(data){ if(data.id==1){ console.log('分享进入的') }else{ console

1.微信小程序 获取用户信息 与获取手机号 详细信息看官方公告:https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801 回收uni.getUserInfo接口可获取用户授权(返回的全部是匿名数据) 4月28日24时后发布的新版本小程序,开发者调用wx.getUserInfo或<button open-type="getUserInfo"/>将不再弹出弹窗,直接

实际使用中,经常需要小程序分享到好友或者朋友圈,一般而言是一个个页面去设置. 官网分享介绍:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage 单页面每一个需要分享的页面多需要单独写上 export default { //发送给朋友 onShareAppMessage(res) { if (res.from === 'button') {// 来自页面内分享按钮 console.log(res.target) } re

在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js 最终显示效果如下; 注意: (1)不能在scroll-view中使用textarea,mao,canvas,video组件 (2)scroll-init-view的优先级高于scroll-top (3)onPullDownRefresh事件,无法在scroll-view中触发

uniapp保存base64格式图片的方法首先第一要先获取用户的权限 saveAlbum(){//获取权限保存相册 uni.getSetting({//获取用户的当前设置 success:(res)=> { // console.log("获取权限",res); if(res.authSetting['scope.writePhotosAlbum']){//验证用户是否授权可以访问相册 this.saveImageToPhotosAlbum(); }else{ uni.autho

一.商品列表 1.1 获取数据 首先能够进入商品列表的途径 传的数据有 了解了这个之后就可以开始了,先创建分支 创建编译模式,并分配初试数据 这个时候就可以获取数据了 需要的数据 所以在发起请求之前需要整理一下数据,先定义数据 整理数据发起请求 1.2 渲染页面 注意我们可以去定义一个默认的图片在data,如果当前这个图片没有就为默认图片 1.3 item封装自定义组件 创建组件 新建插件 然后将我们的结构复制过来,样式也复制过来 然后就是组件利用方面,既然封装的是item组件,就要提现item

​ 一.登录与支付 1.1 登录 1.1.1 条件判断 当我们点击结算应当进行条件判断 第一个如果没有勾选商品 第二个是没选择地址 第三个是未登录 1.1.2 页面布局 应该有两个页面,一个点击登录,一个登陆成功后的页面,所以应该创建两个组件 他们应该按需展示,并且条件为是否有token 然后未登录的页面结构 uni icon的头像icon 1.1.3 获取用户基本信息 由于微信登录并不像pc点击登录就去调用接口,微信登录需要调用自己的登录api,然后获取到一些信息密匙等,而我们的登录接口就需要