winson.online-CSDN博客

原创微信小程序地图显示

示例：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 1170

原创 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 483

原创 d2admin 登陆笔记

1.登陆页面2.vuex 请求登陆接口

2020-04-23 14:24:34 2332 5

原创 vue element-ui el-tabs导致浏览器卡死解决办法

vue版本过低element-ui过高导致pakeage.json:"element-ui": "2.13.0","vue": "2.6.0","vue-template-compiler": "2.6.0"在 npm i

2020-03-27 17:10:30 1672

原创微信小程序下拉加载

图片效果：1.在需要下拉加载的页面json文件{ "usingComponents": {}, "enablePullDownRefresh": true, "backgroundTextStyle": "dark"}2.页面js onPullDownRefresh: function () { wx.showNavigati...

2020-02-17 14:11:30 424

原创微信小程序封装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 7227 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 812

原创微信小程序第一次授权失败第二次授权成功

最近写小程序出现这样一个问题，首先第一次授权百分百成功，等toke过期再次授权就会出现这样的情况与后台分析过这样的情况wx.login 调用的code 过期也可能是session_key过期导致解密失败出现的问题后面反反复复修改并没有找到产生这种现象的原因不过改了代码之后这种现象倒是没有出现过以下代码仅供参考<button open-type="getUs...

2019-09-11 10:13:54 7138 1

原创微信小程序小程序跳小程序

官方文档：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 318

原创微信小程序录音

为录音录音中 wxml：<image src="/img/add_voice.png" class="add-voice" wx:if="{{record == 0 }}" bindtap="startRecord"></image>&

2019-02-18 14:53:45 1626

转载 vue 搭配路由

/router/index.jsimport Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/components/HelloWorld'import GoodsList from './../views/GoodsList'import Title from '@/v...

2019-02-08 22:00:33 215

原创微信小程序简单的地理定位

效果图<view class='container'> <map id="map" longitude="{{lon}}" latitude="{{lat}}" scale="14" markers="{{markers}}"></map></view>.container{

2019-01-24 11:44:36 594

原创微信小程序绑定手机号获取验证码

<view class='content'> <form bindsubmit="formSubmit"> <view class='phone-box'> <text class='phone'>手机号</text> &amp

2019-01-23 15:07:54 7883 6

原创微信小程序购物车布局以及逻辑

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 3618

原创微信小程序播放音频

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 9660 2

原创微信小程序利用组件实现星级

使用组件 iVew Weapp新建文件夹组件拷入 rate 引用的iview组件rate/index.jsComponent({ externalClasses: ['i-class'], properties : { count : { type : Number, value...

2018-12-13 16:40:07 13362 1

原创微信小程序客服按钮

官网文档：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 930

原创微信小程序扫描微信二维码传递参数授权

首先先用微信小程序扫一扫看二维码的参数是什么然后扫描二维码的参数是 scene=u_127这个就是小程序二维码的参数能够在页面里拿到扫描微信小程序授权的结果可以进行编译能够在onLoad();拿到 onLoad: function(options) { let that = this console.log('options'...

2018-11-07 12:41:48 6662 1

原创微信小程序交互过程中对象数组赋值

举个例子这个留言框在wxml页面只写了一个但是如果是多店铺的购买他就会循环出现多次每次输入店铺留言只会保存最后一个input的内容但是后台要拿到多个内容  <view class='content-input flexw'> <view class='input-box flexac'&...

2018-11-01 20:34:03 4621

原创微信小程序获取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 4615

原创微信小程序授权登录

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 541

原创微信小程序上拉刷新

app.js 定义全局 globalData: { userInfo: null, addText: '玩命加载中...', endText: '————— 我也是有底线的 —————', sid: '', },在需要的页面引用js： /** * 页面的初始数据 */ data: { fast: [], ...

2018-10-24 16:10:16 2543

原创微信小程序预防图片变形

主要是加入 mode="widthFix"更多：官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

2018-10-20 19:16:57 2055

原创微信小程序页面跳转

官方文档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 479

原创微信小程序上传图片超过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 7373

原创自定义对象数组

这是在项目中写的代码主要是： let array = [] array.push({ "list": list, "price": price }); console.log('array', array)运用了concat()

2018-10-18 11:00:36 281

原创微信小程序画统计图

如图：用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 6468

原创微信小程序上传图片

官网文档：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 522

原创微信小程序转发分享功能

官网文档：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 116360 10

原创微信小程序 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 6292 1

原创微信小程序 setData赋值改变对象数组的某一值

对于平常的就是：通过请求得到数据传递给data对于改变数组中某一值可以写成that.setData({'list[5].none':num})data：

2018-09-19 18:20:22 4162

原创微信小程序存缓存和存全局

存缓存一般的会把登录成功后的信息存入缓存wx.setStorageSync('user', result);存全局一般的会把openid存全局

2018-09-03 09:51:40 6973

原创微信小程序下拉加载

如图官方文档json 如果所有页面需要下拉加载 enablePullDownRefresh 写在app.json 如果是单个页面下拉加载写在对应的json{ "navigationBarTitleText": "练习", "onReachBottomDistance": "50", "enablePullDownRefresh": true, "bac.

2018-08-30 16:34:23 3664 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 14035

原创微信小程序左侧滑动导航栏

左侧滑动导航栏如图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 15341 5

原创微信小程序轮播图自定义光标的位置

如图轮播图的光标可以用定位来改变上下左右的位置wxml:<swiper class='home-swiper' autoplay='true' bindchange='changDot' interval='4000'>  <swiper-it...

2018-08-24 09:51:10 1922 2

原创微信小程序拨打电话

先看官方文档给需要的view加上事件 bindtap="callPhone"加上： callPhone: function () { let that = this wx.makePhoneCall({ phoneNumber: that.data.wxcode.user.phone //需要拨打的电话号码 }) }...

2018-08-23 16:54:08 1750

原创微信小程序计算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 10697

原创微信小程序点击放大图片、保存、发送给朋友

我们先看官方文档 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 2814

原创微信小程序默认第一个选中变色

效果图：这里默认第一个选中点击每个不会改变样式根据index来实现wxml：页面class有三目运算<view class='box'> <view class='box-container' wx:for="{{list}}" wx:key="list"> <view class="{{index==idx?'_left':'left'}}" bi...

2018-07-16 14:51:48 14200 2

空空如也

空空如也