
微信小程序
微信小程序
高先生的猫
求知若渴,虚心若愚。
展开
-
wx.getUserProfile被回收后 小程序 如何获取头像和昵称
wx.getUserProfile被回收后微信小程序无法直接获取微信昵称和头像,可以通过新的手段获取方案如下。原创 2022-12-28 10:59:55 · 2460 阅读 · 0 评论 -
微信小程序如何判断是否已经订阅某条消息
判断订阅消息是否已经订阅res.subscriptionsSetting.itemSettings返回的是所有订阅消息的对象集合,'accept' 表示用户同意订阅这条消息,'reject' 表示用户拒绝订阅这条消息,'ban' 表示已被后台封禁。原创 2022-10-19 16:22:07 · 4795 阅读 · 0 评论 -
微信小程序相互跳转如何携带参数
微信小程序相互跳转如何携带参数原创 2022-08-08 10:09:04 · 831 阅读 · 0 评论 -
微信小程序踩坑之获取手机号
最近在开发小程序遇到这样一个问题, 在用户点击授权后去解密手机号时会出现第一次失败,第二次成功的情况。研究了一段时间,终于找到比较合理的解决方案,在此记录并总结一下,希望可以帮助到大家。需求描述在用户点击获取电话按钮后, 将用户在微信内设置的电话解密显示在联系电话输入框内具体代码<view class="cu-form-group"> <view class="title text-black">联系电话</view> &..原创 2021-06-22 14:14:36 · 922 阅读 · 1 评论 -
小程序保存多张图片
分为两步:第一获取保存到相册权限第二下载图片主要涉及两个文件,index.js 和download.js另外现在如果有图片下载失败也弹出下载完成后续需要优化核心代码/** * 获取相册权限 */export function wxSaveAuth() { return new Promise((resolve, reject) => { wx.getSetting({ success(res) {原创 2021-03-29 10:52:07 · 568 阅读 · 0 评论 -
小程序自定义导航栏高度计算
自定义导航栏后页面就成了全屏状态,如果还要自定义导航栏,那么就需要重新计算导航栏的高度,让其一直 fixed 在头部。其计算如下: // 获取状态栏高度 const { statusBarHeight } = wx.getSystemInfoSync(); // 得到右上角菜单的位置尺寸const menuButtonObject = wx.getMenuButtonBoundingClientRect();const { top, height } = menuButtonObje.原创 2021-02-26 10:02:44 · 4433 阅读 · 0 评论 -
小程序固定底部的 iPhone X 以上机型兼容
<view class="page page--with-footer"> <!-- 页面内容 --></view><view class="fixed-footer"> <!-- 固定底部的内容 --></view>直接通过 CSS 搞定,不需要判断 iPhone X 等机型/* 固定底部 *//* ---------------------------------------------- *..原创 2021-02-26 10:02:16 · 456 阅读 · 0 评论 -
小程序环境判断及版本号获取
环境判断小程序提供了一个全局的变量 __wxConfig, 其属性 envVersion 值为 develop | trial | release 分别表示开发版,体验版和正式环境const env = __wxConfig.envVersion; // develop | trial | release有了这个之后,就可以搞很多事情了,如数据上报区分,调试工具显示等。除此之外,还可以通过全局变量__wxConfig 获取小程序的 APPIDconst { appId } = .原创 2021-02-26 10:01:22 · 3368 阅读 · 2 评论 -
使用Taro开发各端的顺序建议
以最小成本开发Taro各端现在公司里面的所有小程序,快应用,rn等等都在使用Taro在开发.如果只兼容一端的话,使用Taro开发,没有任何问题.但是又想一次开发,各端正常运行的话,在很多的细节上是要花一点心思的.每一端有每一端的难.开发难度排序华为快应用 > 快应用 >reactNative > Swan小程序 > 微信小程序 > H5关于快应用在开发过程中,如果有涉及到快应用的业务,建议优先开发快应用.快应用的布局标准跟js...原创 2021-02-23 09:41:59 · 401 阅读 · 0 评论 -
H5如何调用小程序分享 微信SDK
我们要做H5的活动页面,但是运营想要把这个活动分享到微信中去,所以需要我们在微信打开这个活动连接时,可以用微信的分享功能先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”代码封装:1、引入小程序SDK<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>2、通过config去注入权限验证配置 * @Description: * @Author原创 2021-02-07 11:32:31 · 3822 阅读 · 4 评论 -
小程序如何封装路由?
路由方法有五个,常用的有三个switchTab、navigateTo、navigateBack简单介绍一下这五个方法及使用场景 switchTab,跳转tabBar页面专用,其他页面出栈,新页面入栈 navigateTo最常用的路由跳转,会加入到页面栈,允许返回,也就是新页面不断入栈 navigateBack返回,只能返回到页面栈中存在的页面,页面不断出栈,直到到达目标页 redirectTo关闭当前页面,跳转某个页面,当前页面不会加入到页面栈,也就是说当前页面不能通过.原创 2020-12-23 13:42:50 · 168 阅读 · 0 评论 -
微信小程序如何实现页面传参
微信小程序之传参的几种方法我们先来看一张图, 这里面总结了几种方法:接下来, 我就这张图做简单说明, 已经明白的大佬们可以直接跳过, 也还请多多指教~1. navigator组件实现页面跳转时可携带参数 // 假设在js文件的data数据中有申明userCode变量 点我跳转到home主页2. navigateTo()方法实现页面跳转时可携带参数 let userCode = "test"; wx.navigateTo({ ...原创 2020-12-23 13:41:15 · 6065 阅读 · 1 评论 -
让小程序代码包立减 10% 的插件 weapp-css-modules
css-modules 是一种css模块化方案,它在构建过程中生成一个原类名与新类名的 map,根据 map 引用样式,通过设定 hash 规则,实现了对 CSS 类名作用域的限定,它通常用来解决页面类名冲突的问题。由于微信小程序内组件样式默认隔离,为什么要使用 css-modules 呢?有以下 2 个原因:hash 化后可以实现更短的命名,减少代码包体积 跨端项目需要兼顾非小程序环境,避免样式冲突weapp-css-modules 做了哪些事?新类名单字母编排,减少代码量 移除类名..原创 2020-12-02 09:33:06 · 297 阅读 · 0 评论 -
微信小程序生命周期、页面生命周期、组件生命周期
1. 生命周期 App(全局)位置:项目根目录app.js文件App({ onLaunch (options) { // console.log('小程序初始化') }, onShow(options) { console.log('监听小程序启动或切前台') }, onHide() { console.log('监听小程序切后台') }, onError(msg) { console.log('错误监听函数') },原创 2020-09-30 15:06:20 · 547 阅读 · 1 评论 -
小程序的版本识别 正式版、体验版、开发版
let miniVersion = __wxConfig.envVersion;let miniVersion_zw = '';console.log('小程序版本' + miniVersion)if (miniVersion == 'develop') { miniVersion_zw = '开发版';} else if (miniVersion == 'trial') { miniVersion_zw = '体验版';} else if (miniVersion == 'releas.原创 2020-09-30 14:58:03 · 1495 阅读 · 0 评论 -
小程序多种路由跳转的区别
前言从Anjular转换到微信小程序,从功能丰富,便捷操作的WebStorm转换到十分难用,不是很人性的微信开发者工具,一开始真的特别不适应,也许是心理作用吧,从一开始就觉得它不好用,后来也是写不下去,后来调整心态,说试试看吧,后来就是越写越顺手,感觉也挺好的,初次接触小程序也是摸着石头过河,要啥就搜啥,期间要用到页面跳转(现在可能用不到了,当时对需求不是很了解,但是以后的功能应该会用到),然后找了很多资料,发现跳转也分很多种,当时就选了一个用上了,后来又试了试别的,发现真的是各有其用。wx..原创 2020-09-07 16:11:12 · 502 阅读 · 0 评论 -
微信小程序wx.chooseImage方法会跳转页面的bug
在微信小程序中调用wx.chooseImage方法选择图片,选择完图片之后页面会莫名的跳转,找了很久才发现原因。研究发现调用wx.chooseImage方法之后会触发入口文件app.js中的onLaunch、onShow方法,然后再触发当前页面的onHide、onShow方法。逻辑如下:app.onLaunch();app.onShow();page.onHide();page.onShow();这四个方法中肯定有业务逻辑,如果不做特殊的处理会导致无法预估的问题。解决办法如下:o原创 2020-09-03 11:54:40 · 1051 阅读 · 0 评论 -
微信小程序wx.getUserInfo授权获取用户信息
这个接口只能获得一些非敏感信息,例如用户昵称,用户头像,经过用户授权允许获取的情况下即可获得用户信息,至于openid这些,需要调取wx.login来获取。index.wxml<!-- 当已经授权的时候 --><view wx:if="{{result == 'ok'}}" class="result"> <view class="headimg"> <image src="{{avatarUrl}}"></image>.原创 2020-08-24 10:53:43 · 3766 阅读 · 2 评论 -
微信小程序如何双重循环
微信小程序解决双重循环准备知识wx:for : 使用数组中各项的数据重复渲染该组件当前项的下标变量名默认为 index,当前项的变量名默认为 item可使用 wx:for-item 指定当前元素的变量名,使用 wx:for-index 指定当前下标的变量名wx:key : 指定列表中项目的唯一的标识符wx:key 的值以两种形式提供字符串,代表在 for 循环的 array 中 item 的某个 property, 如:wx:key="item" 保留关键字 *this 代表在原创 2020-09-01 10:46:11 · 11217 阅读 · 0 评论 -
Kbone:微信官方推出 Web 前端和小程序统一框架
最近微信官方重磅推出了一个统一 Web前端和小程序的框架——Kbone。微信小程序的底层模型和 Web 端不同,开发者无法直接把 Web 端的代码挪到小程序环境内执行。Kbone 的诞生就是为了解决这个问题,它实现了一个适配器,在适配层里模拟出了浏览器环境,让 Web 端的代码可以不做什么改动,便可运行在小程序里。Kbone 是什么?Kbone 是一个致力于微信小程序和 Web 端同构的解决方案。微信小程序的底层模型和 Web 端不同,我们想直接把 Web 端的代码挪...原创 2020-08-18 11:05:20 · 403 阅读 · 0 评论 -
小程序 Promise 封装 wx.request
/* * 小程序 Promise 封装 wx.request * @Author: G.z * @Last Modified by: W.y.t */class Ajax { //定义baseURL constructor(parms) { this.baseURL = parms.baseURL } // get 请求 get(url, data) { return this.ajax('GET', url, da.原创 2020-08-14 13:21:30 · 240 阅读 · 0 评论 -
小程序列表渲染wx:for中自定义index,item
<view wx:for="{{duoda}}" wx:key="{{index}}" class="duo"> 第{{index+1}}题答案:{{item[index+1]}} <view class="analysis" wx:for="{{duojx}}" wx:key="{{index}}" wx:for-index="in" wx:for-item="items" wx:if="{{index==in}}"> 解析:{{items[index...原创 2020-08-11 13:17:58 · 1425 阅读 · 0 评论 -
app跳转小程序发起支付再返回app
最近公司项目要求app拉起微信小程序,使用微信小程序进行支付,开始一听,有点懵逼,迷茫,不知所措.....后来经过一番折腾,预研,查看相关资料,请教相关人士,终于有了结果,下面给大家分享一下吧。欢迎加我技术交流QQ群 :811956471前提条件准备:app和微信开放平台进行绑定一.app端要做的事情:详细demo参见:https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list原创 2020-08-04 11:24:32 · 7113 阅读 · 3 评论 -
小程序用setData改变对象的一属性值
把对应的成员变量用作为一个字符串用方括号[]包裹起来 作为一个变量 ["shopInfo.collectNum"]被赋值 shopInfo:{//店铺信息 collectNum:122, shopName:"店铺"} that.setData({ ["shopInfo.collectNum"]:collectNum+1})...原创 2020-07-29 00:19:57 · 272 阅读 · 0 评论 -
在微信小程序环境下,获取window对象
众所周知,微信小程序的js中不能使用window对象以及document对象。难道他们真的不存在吗?事实并非如此。1、尝试获取window对象熟悉this的同学都知道,在浏览器环境下,触发一个立即执行函数时,其中this的指向往往都是window对象。var window = (function (){ return this})();console.log(window); // Window {requestAnimationFrame: ƒ, cancelAnimati.原创 2020-07-16 10:46:54 · 10552 阅读 · 3 评论 -
微信小程序全局状态管理 wxscv
微信小程序中,数据状态不同页面中不能跨页面同步更新,也就是缺失类似vuex,mobx,redux全局的数据状态管理功能。 有些人移植了这些库,但是毕竟不是微信小程序生态的东西。 Tencent也发布了类似的库,叫做westore,基于小程序开发,非常小巧好用,非常推荐。 但是由于重写了Page方法,而现在很多项目都有自己的框架(已经重写了Page方法等),重构代价较大, 所以参考实现了wxscv,喜欢的朋友直接去github查看。 设计思路 想像model一样引入单独的数...原创 2020-07-12 01:20:48 · 948 阅读 · 0 评论 -
微信小程序流量主开通以及添加广告步骤
1、申请成为流量主首先进入小程序后台,点击流量主,点击开通。开通条件:累计独立访客(UV)不低于1000无严重违纪同意协议并点击下一步。填写个人的相关信息,包括身份证、收款账户等等。注:开户名称 = 开户姓名最后提交,系统会进行审核,审核时间说是大约一周,但是我上午提交的申请,第二天就通过了,效率还是挺高的。2、在小程序中嵌入广告审核通过后,后台界面会做出相应的变化,我们根据提示来创建广告位。点击获取代码,将广告位的代码复制下来,并放在..原创 2020-07-06 10:14:53 · 12547 阅读 · 0 评论 -
小程序安装npm包
如果我们已经创建好了小程序的一些基本配置,后期我们想使用npm的时候,如果我们直接在详情里打开npm的话(如图1)图1然后我们再根据图二图2的时候我们会发现出现了(如图3)如图3你百度了很多方法,已经不能安装npm包,一直出现图3 的情况。其实我们需要在终端cd到我们创建的小程序根目录,然后执行npm i miniprogram-sm-crypto --production然后会发现根目录出现miniprogram_npm的文件夹...原创 2020-06-29 13:10:55 · 3203 阅读 · 3 评论 -
小程序获取px后转为rpx
获取设备信息时得到的窗口高度宽度是px为单位的。 在实际使用时,一般使用rpx ,中间要有个转换过程.代码如下:wx.getSystemInfo({ success:function (res) { console.log(res.windowHeight) // 获取可使用窗口高度 let windowHeight = (res.windowHeight * (750 / res.windowWidth)); console.log(windowHeight) /.原创 2020-06-18 13:13:27 · 2352 阅读 · 0 评论 -
微信小程序页面返回按键控制
今天在开发公司内部的小程序项目时,遇到了一个问题,就是控制手机返回按键的问题,本来我以为很快就可以解决的,没想到最后我用了快一天的时间,才给做好,而且还不是我最初想到的方法。场景公司开发的小程序由于业务需要,要把后台管理的部分页面也给搬到小程序中,由于功能相同,且后台使用的elementui,做一下手机适配就可以拿来用,所以,直接用web-view来实现就可以了,然而,这个页面是“我的”页面,即需要做为三个tabBar之一的页面。我的做法是:在consumer(微信小程序的一个page)中.原创 2020-06-15 10:53:24 · 5240 阅读 · 0 评论 -
小程序加载性能优化实践
前言对于互联网产品来说,第一印象就是应用的启动速度。虽然启动足够快时用户不会有很大的感知,但是如果慢就会被发现就会被挑战,总结来说,快就是应该的。而应用的启动速度优化,又可以分成首次启动速度优化和二次启动速度优化。对于不同的类型,对应的优化方案也是截然不同的。要如何确定优化方向以及优先级呢,这就要从具体的业务场景出发。业务场景但凡不谈业务场景就直接谈优化都是不够专业的。本次优化实践主要是依托在微保的车险业务。众所周知,车险一般都是一年期的保险。因此车险用户的访问频次非常低,一年一次。原创 2020-05-28 10:20:41 · 1456 阅读 · 0 评论 -
前端开发代码规范
目的团队项目不是一个人在写代码,自己写代码爽了,也要让别人看着清晰 减少bug处理,方便bug查找解决,提高开发效率,减少不必要的精力消耗 方便后期维护基本规定代码缩进严格统一,建议都是2空格,或者都是4空格,禁止一切空格交叉使用导致代码不对齐,看着头痛的情况出现 禁止代码断层(完整代码块内出现多余的空行) 重要功能的注释必须写 禁止直接将css禁止在html代码中书写 注销无用的代码一律删掉 便于开发的代码,例如console.log()或alert()在开发完成后一律删掉HTM原创 2020-05-12 16:25:48 · 304 阅读 · 0 评论 -
谈一谈小程序的生命周期及其区别
谈一谈小程序的生命周期及其区别onLoad页面加载时触发。一个页面只会调用一次,可以在onLoad的参数中获取打开当前页面路径中的参数 onShow()页面显示/切入前台时触发 onReady()页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互 onHide()页面隐藏/切入后台时触发。 如navigateTo或底部tab切换到其他页面,小程序切入后台等 onUnload()页面卸载时触发。如redirectTo或navigateBack到其他页面时..原创 2020-05-12 16:21:43 · 229 阅读 · 0 评论 -
在uni-app中使用vant-weapp
1.在根目录下创建wxcomponents,wxcomponents下建文件夹vant2.项目引入1.在https://github.com/youzan/vant-weapp下载最新的zip压缩包2.解压,将里面的dist文件放到vant里面3.在App.vue中引入UI样式@import "/wxcomponents/vant/dist/common/...原创 2020-05-08 10:29:41 · 14559 阅读 · 9 评论 -
小程序中父子组件传值与事件通信
子 -Component{ "component": true, "usingComponents": {}}child.wxml<view class='template-child'> <block wx:for='{{dataFromParent}}'> <button data-id='{{item.id}}' b...原创 2020-05-07 10:12:01 · 605 阅读 · 1 评论 -
微信小程序原生开发技巧及跳坑心得
常用功能1、事件带参在微信小程序中,给事件的回调函数内部传递参数不是通过函数调用传递实参的方式传递的,而是通过在view上绑定属性,然后在回调函数的事件对象的currentTarget属性中的dataset中获取的视图// index 为变量<view data-name="小程序" data-index='{{index}}' bindtap='handle'>...原创 2020-04-24 10:05:33 · 1286 阅读 · 0 评论 -
前端微信小程序常见面试题
1、微信小程序有几个文件WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。内部主要是微信自己定义的一套组件 WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式 js逻辑处理,网络请求 json小程序设置,如页面注册,页面标题及tabBar2、微信小程序怎样跟事件...原创 2020-03-27 10:19:59 · 11057 阅读 · 1 评论 -
微信小程序获取某个元素的宽度和高度
onReady: function () { let query = wx.createSelectorQuery(); let that = this; query.select('#header').boundingClientRect(function (rect) { that.setData({ height: rect.heig...原创 2020-03-27 10:08:33 · 3761 阅读 · 0 评论 -
小程序解析富文本的3种方法优劣,wxParse、rich-text、web-view
我们做普通web开发时,后台可以使用很多的富文本编辑器,比如百度ueditor编辑器,ckeditor富文本编辑器等。但是微信小程序是在自己的引擎里解析,所以很多html/html5的标签无法在小程序里正常显示,一、 使用 wxParse 解析富文本这种方式可以解析 html/markdown 两种脚本,功能很强大,wxParse解析html5富文本缺点在解析富文本...原创 2020-03-26 10:13:23 · 5504 阅读 · 0 评论 -
微信小程序wxss颜色兼容写法
color:#8A96A0ff;#替换成color:#8A96A0; box-shadow:0px 2px 4px #0000001A,0px 0px 2px #0000001A;#替换成box-shadow:0px 2px 4px rgba(0,0,0,0.1),0px 0px 2px rgba(0,0,0,0.1); background: linear-gradie...原创 2020-03-26 10:13:45 · 763 阅读 · 0 评论