微信小程序
豆i浆
我知道自己帅 ,别夸我 我面红
展开
-
微信小程序 ---制作一个类似头条的滑动tab导航栏
效果图:使用页面wxml<!-- 顶部滑动导航栏组件 --><slideNav navList="{{ navList }}" fontSize="{{ 28 }}" padding="{{ 20 }}" bindtabFun="tabFun"></slideNav>使用页面json{ "usingComponents": { "sli...原创 2020-04-02 23:34:41 · 767 阅读 · 0 评论 -
微信小程序 ---制作一个像APP一样的授权列表方式
效果图:实现效果后即可实现第一次打开微信小程序弹出授权列表(登录授权,获取手机号码等特殊授权不支持)wxml文件import { allGetauthorization } from '../../tool/wx_correlation.js'Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页...原创 2020-04-02 23:04:59 · 379 阅读 · 0 评论 -
微信小程序 --- 小程序优化相关
1. 减少this.setData的操作, 尽量将多次操作合并为一次(避免频繁操作引起CPU占用过高导致卡顿)this.setData({ a: 1 })this.setData({ b: 2 })// 可优化为this.setData({ a: 1, b: 2 })2. 减少this.setData中的数据量(无关的数据量,在数据过大时会引起内存溢出)// 接口返回数据let ...原创 2020-04-02 22:40:21 · 1120 阅读 · 0 评论 -
微信小程序 --- 星级评价效果
效果预览: wxml代码部分:<view class='topMaxBox'> <view class='topLeft' style='width: {{ imgW }}px; height: {{ imgW }}px; flex: {{ imgW }}px 0 0;'> <image src='http://img02.tooopen.com/images/20150928/to原创 2018-03-20 15:35:22 · 1809 阅读 · 0 评论 -
微信小程序 --- 路由跳转时传递多个参数
在微信小程序中一般情况给跳转的目标URL传递的参数数量远不止一个,以下提供两种方式实现路由跳转时传递多个参数的方法第一种://实现跳转的A页面jump: function () { let a = 1; let b = 2; wx.navigateTo({ url: '/page/vipOrder/vipOrder?data=' +...原创 2018-04-26 09:40:36 · 13608 阅读 · 0 评论 -
微信小程序 --- invokeWebviewMethod 数据传输长度为 1227297 已经超过最大长度 104857
invokeWebviewMethod 数据传输长度为 1227297 已经超过最大长度 1048576 接 触小程序也有半年了,也没真正总结工作过程中遇到的问题,今天自己的项目突然报了如下的错误,看图: 我打印的是我初始化定义的lists值,前面80条都没有报错,说明是这个lists数据传输过长导致,然后我看了下从后台返回的数据结构,如下:* 乍 一看,这个...转载 2018-07-10 14:33:02 · 2452 阅读 · 0 评论 -
微信小程序 --- 使用wx.redirectTo(OBJECT)跳转页面安卓返回按钮异常问题(监听安卓返回键操作,监听小程序左上角返回按钮)
先看看官方文档对wx.navigateBack的使用解释wx.navigateBack(OBJECT) 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。OBJECT 参数说明:参数 类型 默认值 说明 delta Number 1 返回的页面数,如果 delta 大于现有页面数,则返回到首...原创 2018-08-11 10:34:30 · 11670 阅读 · 0 评论 -
微信小程序 --- 从A页面传参到B页面设置web-view标签src属性传参异常处理方法
一般情况页面跳转参数都是以下几种姿势 参数传递过去接收的处理方法,可以看我的另一篇博文,点击这里跳转第一种: let parameter = 1; wx.navigateTo({ url: '/page/a/a?parameter=' + parameter, })第二种: let parameter = { propertyA: 1, ...原创 2018-08-11 11:35:50 · 5827 阅读 · 0 评论 -
微信小程序 --- 封装小程序get&&post请求成全局函数(最简单可以一行代码完成post,get请求,超简洁~~~)
首先在app.js里面复制这段代码 /** * methods: 请求方式 * url: 请求地址 * data: 要传递的参数 * callback: 请求成功回调函数 * errFun: 请求失败回调函数 */ appRequest(methods, url, data, callback, errFun) { wx.request({...原创 2018-08-11 13:54:41 · 3790 阅读 · 2 评论 -
微信小程序 --- 自定义组件之滑动验证组件
先看效果图:目录结构: 点击这里,浏览器打开弹窗,点击打开微信这开发工具,导入微信开发者工具中,就可以在微信开发者工具观看所有代码,无需复制黏贴调用组件的index文件//index.jsconst app = getApp()Page({ data: { }, myEventListener: function(e) { //获取到...原创 2018-08-15 11:04:15 · 6176 阅读 · 0 评论 -
微信小程序 --- mpvue 自定义导航栏适配方案
在正文开始之前 首先得了解一下我们设计稿的1px在手机中是怎样显示出来的,首先看下图从上图得知了各个安卓和IOS常规屏幕的宽高以及像素比,在日常设计稿常以iPhone6 750px(375 * 2 = 750) 为标准设计,从以上信息得知我们设计稿中的1px 在iPhone6中是占据了2px下面将以10px为单位在每一个型号进行单位换算型号宽度高度设计稿单位像素比转换单...原创 2019-01-03 16:21:10 · 5265 阅读 · 0 评论 -
微信小程序 - wx.navigateBack() 携带参数返回
wx.navigateBack()文档传送门首先文档中并没说明如何通过wx.navigateBack() 传递参数,而其他路由方式可以直接URL拼接传递,但在说明中提及了getCurrentPages,getCurrentPages是能够获取页面栈中所有相关信息的一个方法,而在里面通过打印可以看到这些:在实践发现可以通过利用getCurrentPages去传递参数 let pag...原创 2019-04-17 15:37:32 · 12757 阅读 · 0 评论 -
微信小程序 --- wx.getBackgroundAudioManager()播放音频 安卓几秒后断开解决方法
原本丝滑般流畅的音频为嘛播放几秒就断了 IOS与开发工具为何安然无恙 开发人员为何屡屡被坑 代码控制台为何毫无报错真机测试居然发现希望 究竟是代码的问题 还是腾讯埋下的坑 这背后究竟有隐藏着什么是小程序开发者人性的扭曲还是道德的沦丧?是加班加到想删库跑路但却办不到 还是想埋下坑万人前端仔 这一切的真相 就请看下面我的遭遇昨天,满心欢喜的我开始写音频播放器,因为业务需要。就用...原创 2019-05-31 11:30:33 · 3216 阅读 · 0 评论 -
微信小程序 --- 实现大富翁小游戏(DEMO 半成品)
半成品 半成品 注意是半成品 只是写了扔色子 根据色子行走 其他的没心情写了 哈哈哈本来要实现的效果:然后想到的思路:后面因为懒,对后面的没兴趣了 就写一半 变成这样:然后文件在这里...原创 2019-07-02 14:55:17 · 10929 阅读 · 0 评论 -
微信小程序 --- 日历效果
效果预览: wxml部分:<view class='box1' style='width: {{ sysW * 7 }}px'> <view class='dateBox'>{{ year }} - {{ month}}</view> <block wx:for='{{ weekArr }}'> <view style...原创 2018-02-27 13:50:02 · 19651 阅读 · 6 评论 -
微信小程序 --- 模拟复选框
样式部分你们自由发挥,反正这里是什么都没写的,选中和没选中直接用这个this.data.arrStatus[checkIndex]去判断就行了,之后你们都懂的~~爱怎么耍怎么耍效果预览: js部分// page/index/index.jsPage({ /** * 页面的初始数据 */ data: { items: [ { name:原创 2018-01-08 13:09:29 · 3018 阅读 · 0 评论 -
微信小程序 --- Expecting 'STRING','NUMBER','NULL','TRUE','FALSE','{','[', got EOF 1 |
如图:只需要在根目录的app.json文件下面添加对应路径即可:相关内容可查看官网文档:点击此处即可跳转原创 2017-10-28 15:26:20 · 19523 阅读 · 1 评论 -
微信小程序 --- 子目录json配置无法改变导航栏背景颜色等配置
在这里以改变导航栏背景颜色为例:像app.json这样写你会发现导航栏的背景颜色毫无变化,是因为window属性只在app.json配置文件生效,其他子目录的json配置文件是无法使用window的 因为这样会引起冲突,修正方法很简单。只需要将window删除即可原创 2017-10-28 16:52:09 · 3345 阅读 · 0 评论 -
微信小程序 --- 文件解析错误 SyntaxError: Unexpected end of JSON input
在子目录下添加json配置文件是会出现报错,其原因是因为文件内容空白只需在文件空添加 {}即可解决报错原创 2017-10-28 15:47:03 · 35860 阅读 · 0 评论 -
微信小程序 --- 点击图片预览出现编辑器空白BUG
建议检查你图片资源,看看文件后缀名是否是大写,当我点击了大写后缀的图片文件我是一直都是编辑器界面空白,无论重启几遍编辑工具和重启电脑都无法恢复,建议所有图片格式均为小写,不要用你的随便去捍卫腾讯的BUG,no zuo zuo die更改前: 更改后:一切正常世界和平原创 2017-10-30 18:07:56 · 1594 阅读 · 0 评论 -
微信小程序 --- 在ES6语法箭头函数下使用this.setData报错
在微信小程序的开发工具中,会发现里面已经有ES6语法转换ES5的设置,但是当你使用了箭头函数在里面使用this.setData会发现报错,这可能又是腾讯莫名的BUG了,建议换回ES5语法使用function(){}语法较为妥当。原创 2017-10-30 18:01:15 · 4667 阅读 · 0 评论 -
微信小程序 --- 标签自定义属性说明、及使用方式
首先在微信小程序中我们的所有函数当中都有一个事件处理函数,其参数名为event(点击此处跳转到官方文档说明部分)在将其打印后会发现有一系列参数:在这当中,存放我们标签自定义属性的参数是currentTarget下的dataset,在我们标签中并没有设置自定义属性事,会发现dataset属性里面是空的那么自定义属性是什么格式呢?请看下图:data-xxx上面就是自定义属性的格式 只需要在data-后面原创 2017-10-31 11:08:48 · 41563 阅读 · 0 评论 -
微信小程序 --- 无法跳转到tab页面问题
首先检查你的跳转方法,如果是wx.navigateTo(OBJECT)或者是wx.redirectTo(OBJECT)都是无法跳转的,在微信小程序中如果需要跳转到具有tab的页面必须使用wx.switchTab(OBJECT)方法(点击跳转到该方法文档说明处)如图:原创 2017-11-01 10:10:17 · 4933 阅读 · 0 评论 -
微信小程序 --- 不在以下合法域名列表中请参考文档
报这个错误一般是因为你是用AppID开发的应用,所以管理更加严格,需要你进行配置才可以正常到小程序登录页面登录https://mp.weixin.qq.com/,在设置的地方进行配置就能正常获取了原创 2017-11-01 17:51:54 · 3216 阅读 · 0 评论 -
微信小程序 --- RESTful API 获取资源请求成功却无法获得资源
如果发生这个情况,可能是因为你的请头条是application/json,本来这样应该是没错的,但是也不知道为什么不行只需要将application/json改成application/xml,就能正常获取原创 2017-11-01 17:57:12 · 3679 阅读 · 0 评论 -
微信小程序 --- textarea、input的文本框标签,遮罩层无法覆盖文字问题
在微信小程序中使用textarea、input时,有时候会需要用到遮罩层覆盖文本域的操作。那么一般情况下想覆盖别的元素优先显示指定元素时,会用z-index提高优先显示的元素级别,但在小程序中是行不通的,不管调到999999999999还是更多,都是不行的,下面还有几个失败的情况1.使用透明度(ps:编辑器可行,但真机测试还是显示)2.文字颜色透明(想利用光标随文字颜色变化的也不行原创 2018-01-24 11:37:41 · 10935 阅读 · 7 评论 -
微信小程序 --- 6行代码实现页面返回顶部
效果预览: js部分:Page({ data: { topNum: 0 }, returnTop: function () { this.setData({ topNum: this.data.topNum = 0 }); }}) wxml部分:scroll-view scroll-y scroll-with-ani原创 2018-01-16 23:57:30 · 7992 阅读 · 0 评论 -
微信小程序 --- 10行代码实现滑动tab切换
效果预览: js部分:Page({ data: { arr: [1,2,3,4,5,6,7,8], index: 1 }, onLoad: function (options) { this.setData({ childW: this.data.arr.length * 80 }); }, tabOn: funct原创 2018-01-17 00:37:47 · 454 阅读 · 0 评论 -
微信小程序 --- CSS实现仿网易云音乐播放界面效果(黑胶唱片与唱针纯CSS实现)
下面代码的效果是网易云音乐唱针和黑胶唱片的CSS效果实现方式,播放等并没贴出来实现效果的范围动态图效果预览: stylusW,panW是获取系统宽度计算后的参数wxml部分: view class='stylusBox' style='top: {{ -stylusW*0.5 }}px'> view class='stylus_1' style原创 2018-01-17 12:25:23 · 12403 阅读 · 9 评论 -
微信小程序 --- 出现脚本错误或者未正确调用 Page()
如图:在提示路径的文件下加入一行代码即可解决Page({});原创 2017-10-28 14:46:48 · 1595 阅读 · 3 评论