![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
梦和远方
这个作者很懒,什么都没留下…
展开
-
【微信小程序】请求豆瓣API报403的三种解决方法
微信小程序使用wx.request API请求豆瓣公开api的时候,会报一个403(Forbidden)的错误。这是为什么呢?是由于来自小程序的调用过多,豆瓣来自于小程序的调用被禁止。这里收集以下三种方法解决此问题(设置代理):1、使用 https://douban.uieee.com2、使用 https://www.zhihu.com/question/265806694/answer...原创 2019-03-01 20:06:32 · 3747 阅读 · 1 评论 -
【微信小程序】之监听函数
在微信小程序实现 watch 属性,监听data中的属性,当被监听属性的值改变时,执行我们指定的方法。watch.jsfunction observe(obj, key, watchFun, deep, page) { let val = obj[key]; if (val != null && typeof val === "object" &&...原创 2019-04-29 13:42:32 · 5591 阅读 · 0 评论 -
【微信小程序】常用快捷键
格式调整Ctrl+S:保存文件Ctrl+[, Ctrl+]:代码行缩进Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行Shift+Alt+F:代码格式化Alt+Up,Alt+Down:上下移动一行Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行Ctrl+Shift+E...原创 2019-04-29 13:52:00 · 925 阅读 · 0 评论 -
【微信小程序】首行缩进、 去掉/取消首行缩进
首行缩进text-indent:2em;text的意思是文本,indent在计算机英语中意思是缩进,至于后面的2em意思就是2个相对单位;em这个单位的意思就是文字的高度,1em就是1个文字的高度,2em就是两个文字高度,所以我们写的“text-indent:2em;”的意思就是,文本缩进2个文字的高度,因为汉字是方块字,高度和宽度是一样的,所以缩进2个文字的高度,就等于缩进两个文字的宽度...原创 2019-04-29 13:57:08 · 5669 阅读 · 0 评论 -
【微信小程序】之文本折叠与展开
有时候一个列表的文章过长,显示的时候要省略显示,但是还要有一个展开查看全文的点击事件,可以实现展开与折叠。写的粗略,请见谅!index.js//index.jsPage({ data: { motto: '在实际的开发中,疑或是页面的预览中,或多或少都碰到过这样的情景,那就是文本的折叠与展开!近期在做一个小程序项目,也遇到此情况,就将此顺便总结下来~', isF: ...原创 2019-04-29 14:24:41 · 5789 阅读 · 3 评论 -
【微信小程序】日期格式化
微信自己提供的util中,有一个日期格式化的工具,如果要使用的话,请导入var util = require(’…/…/utils/util.js’),然后关于util.formatTime(new Date)的使用,不要用Date.now(),请老老实实使用 new Date()const formatTime = date => { const year = date.get...原创 2019-04-29 14:42:13 · 2204 阅读 · 0 评论 -
【微信小程序】 两种滑动方式
normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)pre: 保持HTML源代码的空格与换行,等同与pre标签nowrap: 强制文本在一行,除非遇到br换行标签pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行pre-line: 同pre属性,但是遇到连续空格会被看作一个空格inherit: 继承竖向滑动<sc...原创 2019-04-25 16:29:23 · 339 阅读 · 0 评论 -
【微信小程序】之下拉加载和上拉刷新
方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里设置window属性属性类型描述enablePullDownRefreshBoolean是否开启下拉刷新,详见页面相关事件处理函数设置js里onPullDownRefresh和onReachBottom方法属性类型描述...原创 2019-04-25 16:41:04 · 2841 阅读 · 2 评论 -
【微信小程序】之弹框modal
官方文档<modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮" cancel-text="自定义取消按钮" bindcancel="cancel" bindconfirm="confirm" no-cancel="{{nocancel}}"><modal title="{{dialog.tit...原创 2019-04-25 16:52:45 · 5069 阅读 · 1 评论 -
【微信小程序】之画布
canvas 标签默认宽度300px、高度225px同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作属性名类型默认值说明canvas-idStringcanvas组件的唯一标识符disable-scrollBooleanfalse当在 canvas 中移...原创 2019-04-25 17:32:10 · 5179 阅读 · 0 评论 -
【微信小程序】之from表单
平常H5里面或者只要是个页面都会有表单,小程序也不例外from表单from.wxml<form bindsubmit='FormSubmit' bindreset='FormReset'> <view> <input name='title' placeholder='标题' value='{{value}}'></input&g...原创 2019-04-25 17:40:37 · 1154 阅读 · 0 评论 -
【微信小程序】之跨界面传参
小程序传参有限制和组件式传参不一样,所以写下我自己经历的,并解决的示例。Page这种page与page页面之间传参,相对比较方便,但是有一种限制,用?拼接的参数,只能在onload函数中用options接收!//e.target.dataset.id 在wxml页面设置 data-id=‘参数值’ 即可//或者用e.currentTarget.dataset.id接收,两种方式选其一...原创 2019-04-25 18:19:36 · 1150 阅读 · 0 评论 -
【微信小程序】分享接口卡片图片尺寸比例
有没有遇到过分享出去的小程序的图片大小有时候莫名其妙的变得扭曲或者宽高被隐藏。调用微信小程序分享需要button标签<button open-type="share">test</button>然后在js的page里加一个函数onShareAppMessage: function() { return { title: "小伙伴快来和我玩"...原创 2019-04-25 18:29:51 · 14216 阅读 · 0 评论 -
【微信小程序】返回上一页刷新或当前页刷新
bug: 在onShow中执行this.onLoad(),会导致页面第一次加载的时候数组加载两次!造成原因:页面加载先执行onLoad,再执行的onShow,就会出现在onLoad加载一次数据,在onShow中执行this.onLoad()在加载一次数据。解决办法:将不需要刷新的数据放在onLoad中执行,将需要刷新的数据放在onShow中执行!页面的刷新,不管是H5还是APP或者其他浏...原创 2019-04-26 17:13:14 · 4293 阅读 · 2 评论 -
【微信小程序】之自定义顶部导航页签
小程序系统提供的导航页签,只能设置字体,却不能自定义字体图片之类的,所以自己写了一个示例。废话不多说,直接上代码效果:app.jsonLaunch: function() { wx.getSystemInfo({ success: e => { this.globalData.StatusBar = e.statusBarHeight; ...原创 2019-04-25 18:55:29 · 3762 阅读 · 0 评论 -
【微信小程序】公告-向上翻滚的消息栏
效果:wxml&lt;view class='swiper-notice'&gt; &lt;text&gt;公告&lt;/text&gt; &lt;image src='../../images/notice.png'&gt;&lt;/image&gt; &lt;swiper class='swiper-原创 2019-03-05 14:11:34 · 2225 阅读 · 0 评论 -
【微信小程序】轮播图当前图放大效果
微信小程序,原理其实就是获取当前轮播的id ,并将其放大(active样式中可见),就是swiperIndex == index ? ‘active’ : ‘’,但看到效果很明显,以及图图片阴影处理。js/** * 页面的初始数据 */ data: { swiperImgUrls: [ 'https://img03.sogoucdn.com/app/a...原创 2019-02-26 11:37:11 · 2822 阅读 · 1 评论 -
【微信小程序】轮播图自定义指示点
继【微信小程序】轮播图当前图放大效果 博客的基础之上改造的.js/** * 页面的初始数据 */ data: { swiperImgUrls: [ 'https://img03.sogoucdn.com/app/a/100520093/9243fbcd523532c7-65a10dc900adf004-16cb2e34a14409c94f53ee877...原创 2019-02-26 15:51:24 · 3416 阅读 · 0 评论 -
【微信小程序】云数据库交互-增删改查
小程序的云开发模式,有提供一个云数据库,实际上不能算一个数据库,只能算是doc存储。里面创建的不是表,而是集合,所以,也称为云集合开发模式。云数据库官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/config.html?q=swiper官方提供的文档里不但有数据库操作,还有云函数,今日讲解一下数据库的交互问...原创 2019-03-05 17:08:28 · 11183 阅读 · 3 评论 -
【微信小程序】6/8/10个icon快捷菜单
效果js/** * 页面的初始数据 */ data: { /*类目列表*/ sortRows: [ [{ image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65...原创 2019-02-26 16:21:22 · 1616 阅读 · 0 评论 -
【微信小程序】6/8/10个icon圆球导航
微信小程序的icon圆球菜单效果js/** * 页面的初始数据 */ data: { navBtn: [{ 'name': '你猜猜', 'icon': '', 'url': '../caicai/caicai', 'bgc': '#5093D2' },{ 'name':...原创 2019-02-26 17:19:11 · 2356 阅读 · 2 评论 -
【微信小程序】分类页面分类tab实现
jsdata: { cateItems: [{ cate_id: 1, cate_name: "护肤", ishaveChild: true, children: [{ child_id: 1, name: '洁面皂', image: "http:/...原创 2019-03-08 14:06:46 · 6471 阅读 · 6 评论 -
【微信小程序】数组排序以及去重问题详解
微信小程序中,通常有一些数据,是存在前端缓存里的,但是这个数据如果是没有处理过,需要动态处理的时候,数据就会有问题。所以,提供一些数据的几种处理方式。二维数组排序var arr1 = new Array();arr1 = [["中猫猫er", "E7555大号", "包背带", "150", "0.16"], [&原创 2019-03-04 09:54:36 · 13957 阅读 · 2 评论 -
【微信小程序】常用Array对象方法详解
1.concat() 方法用于连接两个或多个字符串。连接两个字符串:var str1 = "Hello ";var str2 = "world!";var n = str1.concat(str2);n 输出结果:Hello world!concat(array1,array2,...)var a=[1,2,3,4,5];var a2=['a','b','c'];va...原创 2019-03-04 10:58:13 · 4217 阅读 · 0 评论 -
【微信小程序】Page()函数详解
在开发微信小程序的时候遇到函数,或者不明白的地方,最好上官网查询相应的知识,这里小编帮大家整理了下page()常用函数的用法。Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。一、object 参数说明:属性类型描述dataObject页面的初始数据onLoadFunction生命周期...原创 2019-03-04 11:24:21 · 8149 阅读 · 0 评论 -
【微信小程序】快捷util封装
微信小程序中经常会用到一些快捷的全局方法,比如日期格式化,时间转换等,所以提供以下简单的公共方法的封装。日期格式化//util.js 引入js文件即可调用 const util = require('../../../utils/util.js');const formatTime = date => { const year = date.getFullYear() ...原创 2021-02-21 08:47:10 · 5461 阅读 · 0 评论 -
【微信小程序】授权与重新授权
授权与重新授权jsgetUserInfo: function(e) { if (e.detail.userInfo) { //用户按了允许授权按钮 var that = this; console.log("用户的信息如下:"); //console.log(e.detail.userInfo); } else { ...原创 2019-03-08 11:45:57 · 4901 阅读 · 0 评论 -
【微信小程序】一些常用技巧
CSS 背景图片百分比及应用适用于rpx雪碧图标中背景图片精准定位百分比计算公式任何CSS属性值为百分比时,都需要根据某个参考值进行计算,搞明白这个参考值是什么,理解就容易多了。标准规定:background-position:percent的参考值x为:百分比为background-position-x的值 = (背景在雪碧中的左边宽度)/(容器宽度 - 背景图片宽度)*100%。举个...原创 2019-05-06 11:23:19 · 462 阅读 · 0 评论