![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
推开世界的门
掘金地址:https://juejin.cn/user/2963939081585479/posts
展开
-
小程序实现一个 倒计时组件
初始化时间: 如果服务度返回了时间差,这一步不用处理。时间的格式化处理,这里都是固定代码,没什么含量。tick 倒计时函数。原创 2023-09-14 17:36:09 · 889 阅读 · 0 评论 -
小程序 - canvas绘制海报
需求背景小程序不能直接分享至朋友圈,所以采用海报(最关键的就是邀请码)邀请好友。从展示层面来讲,就是几张图,通过定位放在一起即可,但是关键是要保存,这个时候,就需要canvas去进行图片合成。那么canvas绘制海报,就拆分两个部分通过css ,给用户展现的组合图片,这跟简单通过css 布局,将各个元素组合在一起。这个想必不用多说,保存时,通过canvas绘图,将图片合成一个完整的图片canvas 绘图,有两种模式新版 2d 模式(有坑,慎用)老版 canvas-id=“draw原创 2022-04-20 18:40:08 · 3485 阅读 · 1 评论 -
小程序 - wxs
wxs: 在小程序里写函数表达式,做数据处理官方文档wxsWXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。在wxs里写正则,将. 替换为 / 象需要使用 getRegExp函数。wxs 判断数据类型...原创 2022-04-20 16:11:17 · 824 阅读 · 0 评论 -
小程序 - 超过两件折叠展开逻辑
需求背景:小程序商品数据不是太多,所以无需分页,但是全部展示又太占位置。所以做一个超过两件进行展开折叠,用户自己效果图实现思路前景: 超过两件,展示展开折叠图例。点击图例,传数据,和标识进去。如果 showAll == true ,表明要全部展示,直接将传入的数据返回如果showAll == false , 表明只展示两件。循环传入数据,将其保存,并返回index.wxsvar goodsList = function (list = [], showAll) { if (showAll原创 2022-04-20 15:28:25 · 451 阅读 · 1 评论 -
小程序 uniapp 实现pdf 电子合同签名 并导出功能
小程序 uniapp 实现pdf 电子合同签名 并导出功能需求流程:用户只允许上传pdf后端将上传后的pdf以base64图片的形式返回用户设置签名的位置位置设置完成,将电子签名放到设定的位置处利用canvas将两张图片合成一张图片,保存至相册实操代码实现:...原创 2020-12-04 17:16:00 · 24099 阅读 · 108 评论 -
存证小程序--开发记录
1:原创 2020-11-06 19:53:49 · 805 阅读 · 0 评论 -
uniapp 实现图片预览 单图预览和多图预览
uniapp 实现图片预览 单图预览和多图预览关键点就是调用uni.previewImage({ current: index, urls: photoList });如果是单图预览,current对应就是0,urls:必须是单个某一条传入。因为现在预览一张图片,你的current传死就是0.所以urls也必须是字符串形式如果是多图预览,current,对应就是在循环图片数据的索引,urls: 是数组形式传入。因为uni.previewImage 要根据 current的索引,来原创 2020-10-17 14:46:50 · 6246 阅读 · 0 评论 -
uniapp 收藏功能实现及组件封装
文章目录前言一、uniapp小程序收藏功能思路分析:1 父组件向子组件传值2 子组件接收到值,将数据初始化子组件利用属性绑定,根据当前的type值来显示已收藏还是未收藏点击收藏,切换状态,并且调用更新数据接口使用步骤引入uniapp中的icons前言一、uniapp小程序收藏功能思路分析:父组件引入子组件.并且父组件通过属性绑定向子组件传递数据子组件利用props来接收父组件传来的值,并且进行数据数据初始化赋值子组件利用属性绑定,根据当前的type值来显示已收藏还是未收藏点击收藏,切换状态原创 2020-10-12 14:57:28 · 5152 阅读 · 3 评论 -
uniapp
顶部导航1: 外部100%, flex2:scroll-view 部分 flex: 1 overflow: hidden 高度 padding3: 右侧固定宽度4: 伪元素 : 给top bottom 不用给height<view class="tab"> <scroll-view class="tab-scroll" scroll-x> <view class="tab-scroll__box"> <view v-for="(item,原创 2020-10-07 08:13:13 · 518 阅读 · 0 评论 -
uniapp 微信小程序跳转至其他小程序
需求微信小程序跳转至拼多多小程序要点根据后台传给的路径和appId进行传值@click="tao(item.weAppInfo.pagePath, item.weAppInfo.appId)"item.weAppInfo.pagePath, item.weAppInfo.appId 都是后端返回的数据在方法里,调用 uni.navigateToMiniProgram 并且传值tao(url, id) { console.log(url); uni.navigateTo原创 2020-07-31 15:37:43 · 8751 阅读 · 2 评论 -
小程序(uniapp)-实现分页功能
需求数据太多,一下加载不过来,所以需要触底再加载数据。数据加载中,提示加载中;数据加载完毕,提示没有数据大致思路分页(触发)时机利用小程序scroll-view 的触底事件。来请求数据请求来的数据,利用展开运算符,进行数据拼接[…data, …res.data]每次请求多少条数据,当前页,数据总数要搞明白数据请求完,加载中消失,显示没有数据具体实现初始化变量触底需要做的事修改参数 pageNo(当前页) += pageSize(跳过几页)重新发送请求 rushList原创 2020-07-28 08:10:20 · 8929 阅读 · 1 评论 -
uniapp 解析后端返回的 html
需求由于6.18活动到期,需要修改文案信息,这就得前后端都得再跑一遍流程。为了减少人员使用,所以将前端静态界面,全部给后端,然后将后端返回的数据,前端通过特定格式来解析。这样,以后单纯文案的修改,就不需要前端的参与了!!!大致思路将所有html,和写在行内的样式,给后端下载 uParse-master 并且引入,注册组件用注册的组件,来渲染后端返回的数据具体操作实例将之前view,外部样式。全部改成div,行内样式, 然后给后端之前:现在下载 uParse-master地原创 2020-07-01 11:06:34 · 6235 阅读 · 3 评论 -
小程序 -条码识别和图像ocr识别
应用场景用户通过扫描条码,或者拍照,上传图片,可以查询某个产品的信息条码实现使用API : uni.scanCode({}),成功之后,会返回barcode。然后将此barcode传递到相应的页面(因为调用接口,需要barcode) // 允许从相机和相册扫码 uni.scanCode({ success: async res => { console.log("条码类型:" + res.scanType); con原创 2020-06-07 20:57:58 · 1626 阅读 · 0 评论 -
小程序用户进入首页,只弹框一次
场景用户第一次进入小程序,需要给用户一个新手引导,但是用户既不登录也不注册。只是进来逛了一圈就走了。下次再进来,此用户就不是新用户,就不在有新手引导或者首页弹框广告实现用户首次进入,在onLoad里就调用wx.login(),将用户的信息存储起来。用户下次进入的时候,只需要判断有无次存储信息即可代码onLoad(options) { this.Six(); if (wxApi.getStorageSync("SixTip") == "") { this.aler原创 2020-06-07 11:42:24 · 4233 阅读 · 2 评论 -
uniapp中 小程序开发环境和上线环境
场景开发环境一个地址,线上环境一个地址操作我就偷个懒吧,在基础路劲下,添加两个路径。在开发阶段,我就用开发阶段的接口地址,在发布阶段,我就用发布阶段的接口地址至于你是 用 dev 还是buildnpm run dev:只是用来调试的,开发就够了;npm run build:你想用提交小程序版本的时候,运行,然后代码都会被压缩,提交的时候就更小了。...原创 2020-05-23 10:36:41 · 1540 阅读 · 0 评论 -
小程序 图像ocr识别
应用场景用户拍照 ,查询产品信息看着很高大上,其实就是调接口啦…但是接口要求,你传入的图片必须的是base64,这就有思考之处了。我上传图片,一下到详情页,要展示图片,展示base64肯定是不行的那么在拍照的时候,先用原图路径,跳转到详情页,也是原图路径,在详情页先展示原图,再把图片变成base64跳到详情页后,接收路径,并展示图片展示就正常展示拍照传来的图片路径即可这就解决了,1:拍照传递图片,如果传base64,后缀太长问题,在详情页再转base64...原创 2020-05-18 10:41:43 · 1573 阅读 · 0 评论 -
vue数组嵌套多层对象,抽取相同的数据进行比较
场景应用1. 在对比栏目,A商品和B商品返回数据,如下2. 现在要抽取每一项相同的数据进行比较,类似于这个效果图实现let temArr = []; let zhongjianArr = []; let arr = []; const nua = this.products; console.log("要比较的营养成分", nua); for (let [proIndex, item] of nua.entries()) {原创 2020-05-18 09:13:04 · 2022 阅读 · 0 评论 -
小程序云开发基础和订阅消息
小程序云开发项目的三大板块数据库存储云函数数据库通过 wx.cloud.database().collection("list") 来导入数据库对数据的增删改查 增: 需要通过e..detail.value来获取增加的数据,通过data值来接收增加的数据,之后调用成功失败的回调. 自动将数据保存到数据库删:通过doc传递id,调用remove方法改:通过doc传递id,调用u...原创 2020-03-23 20:16:03 · 316 阅读 · 0 评论 -
mpvue- 实现二次确认功能+ 数据渲染
需求分析:1:学生在选校的时候,点击确认直接就选了学校,这个时候需要一个二次确认的功能,以免手抖,进行错误的操作2:需要新增选校的详细信息,里面难点包括三层数据数据的循环,时间戳转化为正常时间的我先说下自己的思路:二次确认:点击确认按钮,肯定会触发一个事件来弹框,所以先找到按钮找这个点击方法接下来找 showConfirmBox,发现他是一个组件,里面还有一个方法,那就接着...原创 2020-02-24 12:18:17 · 339 阅读 · 0 评论 -
微信小程序
界面层:事件:给组件添加bind+事件名,在js里的page({})写方法阻止事件冒泡catch+事件名 绑定事件,阻止事件冒泡事件传参通过给组件设置data-xxx="",在事件处理函数中使用e.target.dataset来获取注意:小程序里面事件处理函数的this指向的是当前页面对象单项数据流—数据绑定this.setData()—事件所谓单项数据流,就是逻辑层和视图层只能进...原创 2019-11-11 15:10:06 · 144 阅读 · 0 评论 -
微信小游戏基础(一) - ES类(定义构造函数并生成对象)
JavaScript定义构造函数并生成对象的传统方式function Test(x,y){this.x= x;this.y = y}test.prototype.sum(){return this.x+this.y;}var t = new Test(200,10);console.log(t.sum());ES6定义构造函数并生成对象的方式clas...原创 2018-10-04 12:05:56 · 826 阅读 · 0 评论 -
微信小游戏基础(二) - 继承
好处:可以提高代码的复用性使用关键字extends,extends的意思是扩展class People{constructor(name){this.name = name;}eat(){console.log("我能吃");}run(){console.log("我能跑");}}class Son extends People(){ }...原创 2018-10-04 12:29:37 · 286 阅读 · 0 评论 -
微信小游戏基础(三) - Module语法
在ES6之前,JavaScript没有模块体系。无法将大程序拆分成相互依赖的小程序。模块功能主要由两个命令组成,export,import,Export用于暴露数据,import用于引入数据一个模块就是一个独立的文件,该文件的所有变量,外部无法获取,如果需要获取某个变量,就要使用export把该变量暴露出去。我们之前使用module.export的方式暴露数据,使用require导入 数据...原创 2018-10-05 11:18:58 · 1121 阅读 · 0 评论 -
微信小游戏(四)从js的定时器到requestAnimationFrame
计时器一直是JavaScript动画的核心,而编写动画循环的关键是要知道延迟时间要多长才合适,setTimeout和setInterval的问题是,他们都不精确,所以后面就有requestAnimationFramerequestAnimationFrame的用法与setTimeout很相似,只是不需要设置时间间隔,requestAnimationFrame使用一个回调函数作为参数,这个回...原创 2018-10-05 11:45:18 · 2374 阅读 · 0 评论 -
微信小游戏 实战-让一张图片自动在屏幕上滚动
首先创建一个画布设备的长和宽图片的信息定义类来做事图片资源初始化,话图片,运动drawImage传递一个img对象位置创建画布-var cxt = canvas.getContext('2d')设备的长和宽var screenHeight = window.innerHeight;var screenWidth = window.innerWid...原创 2018-10-07 22:02:38 · 3450 阅读 · 0 评论 -
微信小程序代码格式化
代码格式化:shift+alt+F原创 2019-09-19 21:51:56 · 5286 阅读 · 0 评论 -
微信小程序-利用flex布局实现一个简单的页面
预展首先进行结构划分:头部,内容区域,底部头部和底部是固定高度内容区域是自适应撑开三部分是自上而下,二flex布局是从左向右,所以利用flex-direction:colum ,将其列排头部:利用flex布局:给其父元素添加:display:flex子元素:flex:1 平均的铺满至于距离,+margin/padding底部:和头部如出一辙,只不过内部...原创 2019-09-20 15:23:25 · 958 阅读 · 1 评论 -
微信小程序-轮播图详解(分分钟看会)
写轮播需要用到微信小程序swiper组件<swiper autoplay="u" indicator-dots="u" duration="200" interval="2000" indicator-color="#ccc"> // 里面用到的属性,看小程序文档<block wx:for="{{swiperImg}}" wx:key=&q原创 2018-09-25 11:14:24 · 1084 阅读 · 0 评论