微信小程序
winson.online
这个作者很懒,什么都没留下…
展开
-
微信小程序 地图显示
示例:wxml:<map id="map" longitude="{{detail.lon}}" latitude="{{detail.lat}}" scale="14" controls="{{controls}}" markers="{{markers}}" bindtap="mapClick" show-location bindmarkertap="mapClick"></map>map组件所用参数data:onLoad setData 圈出原创 2020-11-18 13:58:05 · 1216 阅读 · 0 评论 -
h5页面 rem计算
! function (n) { //页面字体自适应 var e = n.document, t = e.documentElement, i = 750, d = i / 100, o = "orientationchange" in n ? "orientationchange" : "resize", a = function () { ...原创 2020-08-31 13:36:23 · 532 阅读 · 0 评论 -
微信小程序 下拉加载
图片效果:1.在需要下拉加载的页面json文件{ "usingComponents": {}, "enablePullDownRefresh": true, "backgroundTextStyle": "dark"}2.页面js onPullDownRefresh: function () { wx.showNavigati...原创 2020-02-17 14:11:30 · 467 阅读 · 0 评论 -
微信小程序 封装post请求 header加token code码拦截
1.添加一个js文件 例如:class/api/Post.js2.编写js文件 例:token我存在用户信息 17000用户信息过期3.引用 app.js4.页面使用代码:export default class Post { constructor() { } request = (path, data) => { let app...原创 2020-02-17 13:49:09 · 7292 阅读 · 1 评论 -
微信小程序 简单的地理定位
效果图<view class='container'> <map id="map" longitude="{{lon}}" latitude="{{lat}}" scale="14" markers="{{markers}}"></map></view>.container{原创 2019-01-24 11:44:36 · 615 阅读 · 0 评论 -
微信小程序 播放音频
wxml:<!-- 语音 --><view wx:if="{{content.mp3.length > 0 }}"> <view class='audio' bindtap='musicStart'> <view class='audio_btn'> <image src='/img/btn_...原创 2019-01-17 18:14:43 · 9737 阅读 · 2 评论 -
微信小程序 利用组件实现星级
使用组件 iVew Weapp新建文件夹 组件拷入 rate 引用的iview组件rate/index.jsComponent({ externalClasses: ['i-class'], properties : { count : { type : Number, value...原创 2018-12-13 16:40:07 · 19932 阅读 · 1 评论 -
微信小程序 购物车布局以及逻辑
wxml:<!-- 购物车 --><view wx:if="{{showPro}}"> <view style='padding-bottom: 100rpx;'> <view wx:for="{{shopData}}" wx:key="shopData" class='pro'> <原创 2019-01-22 14:32:24 · 3704 阅读 · 0 评论 -
微信小程序 绑定手机号获取验证码
<!-- 绑定手机号 --><view class='content'> <form bindsubmit="formSubmit"> <view class='phone-box'> <text class='phone'>手机号</text> &原创 2019-01-23 15:07:54 · 7947 阅读 · 6 评论 -
微信小程序 录音
为录音录音中 wxml:<!-- 开始录音 --><image src="/img/add_voice.png" class="add-voice" wx:if="{{record == 0 }}" bindtap="startRecord"></image><!-- 录音中 -->&原创 2019-02-18 14:53:45 · 1674 阅读 · 0 评论 -
微信小程序 小程序跳小程序
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/miniprogram-navigate/wx.navigateToMiniProgram.html...具体操作:app.json 写入要跳转的 appId "navigateToMiniProgramAppIdList": [ ...原创 2019-09-11 09:46:05 · 349 阅读 · 0 评论 -
微信小程序 第一次授权失败 第二次授权成功
最近写小程序出现这样一个问题,首先第一次授权百分百成功,等toke过期再次授权就会出现这样的情况与后台分析过这样的情况wx.login 调用的code 过期 也可能是session_key过期导致解密失败出现的问题后面反反复复修改 并没有找到产生这种现象的原因 不过改了代码之后 这种现象 倒是没有出现过以下代码 仅供参考<button open-type="getUs...原创 2019-09-11 10:13:54 · 7273 阅读 · 1 评论 -
微信小程序 手机授权 获取手机号
官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html先在onShow() 用code换session_key onShow() { wx.login({ success: res => { let jsCo...原创 2019-09-23 10:39:23 · 845 阅读 · 0 评论 -
微信小程序 客服按钮
官网文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/receive.html例如这个:<view> <image src='/img/img/servicewx.png' class='card-img'> ...原创 2018-11-07 12:47:51 · 977 阅读 · 0 评论 -
微信小程序 扫描微信二维码 传递参数授权
首先 先用微信小程序扫一扫 看二维码的参数是什么然后 扫描二维码的参数是 scene=u_127这个就是小程序二维码的参数 能够在 页面里拿到 扫描微信小程序授权的结果 可以进行编译能够在onLoad();拿到 onLoad: function(options) { let that = this console.log('options'...原创 2018-11-07 12:41:48 · 6708 阅读 · 1 评论 -
微信小程序 setData赋值 改变对象数组的某一值
对于平常的就是:通过请求 得到数据传递给data对于改变数组中某一值可以写成that.setData({'list[5].none':num})data:原创 2018-09-19 18:20:22 · 4202 阅读 · 0 评论 -
微信小程序 存缓存和存全局
存缓存一般的会把登录成功后的信息存入缓存wx.setStorageSync('user', result);存全局一般的会把openid存全局原创 2018-09-03 09:51:40 · 7005 阅读 · 0 评论 -
微信小程序 计算input框输入的长度
如图wxml 和 wxss只是布局 看js逻辑<view class='input'> <text class='input-left'>标题</text> <input name='' value='' placeholder='请输入' bindinput='length'></input> <text...原创 2018-08-21 17:01:56 · 10815 阅读 · 0 评论 -
微信小程序 轮播图自定义光标的位置
如图轮播图的光标可以用定位来改变上下左右的位置wxml:<!--start banner --><swiper class='home-swiper' autoplay='true' bindchange='changDot' interval='4000'> <!-- 设置自动播放,切换间隔时间--> <swiper-it...原创 2018-08-24 09:51:10 · 1966 阅读 · 2 评论 -
微信小程序 拨打电话
先看官方文档给需要的view加上事件 bindtap="callPhone"加上: callPhone: function () { let that = this wx.makePhoneCall({ phoneNumber: that.data.wxcode.user.phone //需要拨打的电话号码 }) }...原创 2018-08-23 16:54:08 · 1770 阅读 · 0 评论 -
微信小程序 下拉加载
如图官方文档json 如果所有页面需要下拉加载 enablePullDownRefresh 写在app.json 如果是单个页面下拉加载写在对应的json{ "navigationBarTitleText": "练习", "onReachBottomDistance": "50", "enablePullDownRefresh": true, "bac.原创 2018-08-30 16:34:23 · 3804 阅读 · 1 评论 -
微信小程序 手机号码验证
wxml<form bindsubmit='formSubmit'> <view class='all'> <text>手机号:</text> <input name="phone" placeholder='请输入手机号' type='number' style='color:#333' placeholder-st...原创 2018-08-27 15:45:08 · 14073 阅读 · 0 评论 -
微信小程序 左侧滑动导航栏
左侧滑动导航栏如图wxml<!-- 左侧滚动栏 --><view class='under_line'></view><view style='float: left' class='left'> <scroll-view scroll-y scroll-with-animation scroll-left="{{scro...原创 2018-08-27 10:37:40 · 15432 阅读 · 5 评论 -
微信小程序 picker组件运用对象数组
官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/picker.htmlwxml:<view class='input-box flexac'> <text>积分抵扣(%)</text> <view class="section flexac"> ...原创 2018-10-11 10:33:52 · 6379 阅读 · 1 评论 -
微信小程序 转发 分享功能
官网文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html第一种情况 点击小程序转发不加入参数 //转发 onShareAppMessage: function() { let users = wx.getStorageSync('us...原创 2018-10-13 11:18:24 · 116866 阅读 · 10 评论 -
微信小程序 上传图片
官网文档:https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html微信小程序 交互的 图片是单独上传的 uploadDetail(gid) { let that = this if (that.data.detailbox.length != 0) { ...原创 2018-10-15 15:26:02 · 542 阅读 · 0 评论 -
微信小程序 交互过程中对象数组赋值
举个例子 这个留言框在wxml页面只写了一个 但是如果是多店铺的购买 他就会循环出现多次 每次输入店铺留言 只会保存最后一个input的内容但是后台要拿到多个内容 <!-- 留言 --> <view class='content-input flexw'> <view class='input-box flexac'&...原创 2018-11-01 20:34:03 · 4666 阅读 · 0 评论 -
微信小程序 上拉刷新
app.js 定义全局 globalData: { userInfo: null, addText: '玩命加载中...', endText: '————— 我也是有底线的 —————', sid: '', },在需要的页面引用js: /** * 页面的初始数据 */ data: { fast: [], ...原创 2018-10-24 16:10:16 · 2558 阅读 · 0 评论 -
微信小程序 获取formId
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/form.html?search-key=report-submitwxml:report-submit='true'js: addfrom(e) { console.log('form', e) var that = thi...原创 2018-10-25 10:24:34 · 4651 阅读 · 0 评论 -
微信小程序 授权登录
app.js调用wx.login登录授权页 做成button <button open-type="getUserInfo" class="tologin" bindgetuserinfo="getKonw">确认授权</button> getKonw: function ({ detail }) { console.log('getKnow...原创 2018-10-25 09:49:10 · 556 阅读 · 0 评论 -
微信小程序 预防图片变形
主要是加入 mode="widthFix"更多:官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/image.html原创 2018-10-20 19:16:57 · 2075 阅读 · 0 评论 -
微信小程序 页面跳转
官方文档https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html跳转tabBar页面 wx.switchTab({ url: '/pages/index/index', })跳转页面//没有传入参数 wx.navigateTo({ ...原创 2018-10-20 19:12:06 · 583 阅读 · 0 评论 -
微信小程序 画统计图
如图:用canvas画图以及wxcharts.jswxcharts.js我修改了一些东西参考wxcharts文档修改wxml:<canvas canvas-id="Statistical"></canvas>js:const Charts = require('../../dist/wxcharts.js')Page({ d...原创 2018-10-17 10:33:06 · 6530 阅读 · 0 评论 -
微信小程序 上传图片超过10个 以及解决uploadFile:fail exceed max upload connection count 10报错
比如:在做项目的时候发现这个商品上传需要 最多传入18张图片发现上传图片没限制但是报了一个错uploadFile:fail exceed max upload connection count 10然后去官方文档去看这个就是最终的原因request、uploadFile、downloadFile 的最大并发限制是 10 个;图片上传 一般我是用的fo...原创 2018-10-19 11:48:15 · 7629 阅读 · 0 评论 -
微信小程序 点击放大图片、保存、发送给朋友
我们先看官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html#wxpreviewimageobject在js文件调用次方法 // -------- 点击图片放大 保存 ------- previewImage: function (e) { var that = this...原创 2018-08-13 11:36:15 · 2837 阅读 · 0 评论