![](https://img-blog.csdnimg.cn/20190927151026427.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
微信小程序
文章平均质量分 70
.
漂移的电子
哎呀呀
展开
-
微信小程序项目功能要点总结
wx.setClipboardData设置系统复制粘贴,input输入框字数监听,wx.requestPayment支付原创 2020-05-29 16:45:47 · 865 阅读 · 1 评论 -
微信小程序安全距离ios屏幕适配
padding-bottom: constant(safe-area-inset-bottom); /*兼容 iOS<11.2*/padding-bottom: env(safe-area-inset-bottom); /*兼容 iOS>11.2*/原创 2020-11-12 19:55:54 · 1380 阅读 · 1 评论 -
微信小程序加空格
text 要加decode="{{true}}" <text decode="{{true}}">{{name}} </text>原创 2020-11-12 15:20:14 · 208 阅读 · 0 评论 -
解决微信小程序切换环境,切换接口太麻烦的问题 __wxConfig.envVersion
__wxConfig.envVersion获取小程序当前环境let REQUEST_URL = "";function baseUrl() { const version = __wxConfig.envVersion; switch (version) { case 'develop': REQUEST_URL ="测试接口"; //开发版 break; case 'trial': REQUEST_URL = "测试接口"; //体验版 break; case原创 2020-11-10 15:36:08 · 2859 阅读 · 2 评论 -
微信小程序左右滑动事件&&动画效果
<view class="page" > <view class="box_toast" bindtouchstart="touchstart" bindtouchend="touchend" animation="{{animationData}}"></view> <view class="box_bg" bindtouchstart="touchstart" bindtouchend="touchend"></view></v原创 2020-10-21 13:41:31 · 1014 阅读 · 0 评论 -
解决微信小程序穿透事件&&不影响弹出层滚动事件
爬坑之路如此漫长情况一、弹出层无滚动事件情况二、原创 2020-10-19 09:32:49 · 474 阅读 · 0 评论 -
微信小程序向左向右滑动事件
<view bindtouchstart="touchstart" bindtouchend="touchend">向左向左向左,向右滑动啦啦啦</view>Page({ data: { nowclientX: "" }, touchstart(e) { console.log(e) this.setData({ nowclientX: e.changedTouches[0].clientX }) }, touchend(e) { let n原创 2020-10-16 17:00:18 · 2984 阅读 · 0 评论 -
微信小程序组件的运用&&下拉刷新弹框组件
第一步、构建组件components/boxWarningwxml<view class="warning_box" wx:if="{{isShow}}"> <text class="warning_text">{{warningText}}</text></view><view wx:if="{{isBottomLoading}}"> <view wx:if="{{bottomLoadingText=='正在加载'}}" cla原创 2020-10-16 13:48:24 · 382 阅读 · 0 评论 -
微信小程序滑动指定区域,播放视频video&&实时视频、直播
<view> <scroll-view class="scroll-view" scroll-y id="scroll-view"> <view class="box_row_left"> <view wx:for="{{tableData}}" wx:key="index" wx:for-item="item" class="box_column" wx:if="{{index%2==0}}"> {{index}} <vi原创 2020-10-16 10:45:15 · 2324 阅读 · 0 评论 -
微信小程序瀑布流布局,参差不齐交错跟进
<view> <scroll-view class="scroll-view" scroll-y id="scroll-view"> <view class="box_row_left"> <view wx:for="{{tableData}}" wx:key="index" wx:for-item="item" class="box_column" wx:if="{{index%2==0}}"> <!-- --> &.原创 2020-10-14 09:28:48 · 938 阅读 · 0 评论 -
解决微信小程序实时视频、直播插件 主播意外掉线再进入,观众端卡住断流,无法刷新的问题
观众端:<live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" id="video-livePlay"/> statechange(e) { console.log('live-player code:', e.detail.code)原创 2020-09-19 11:15:41 · 2164 阅读 · 0 评论 -
微信小程序中 设置全局变量、使用、修改设置
1、全局变量的设置在miniprogram > app.js 文件中设置,globalData对象就是存储全局变量的。App({ globalData: { hasLogin: false, }, onLaunch: function () { }})2、全局变量的使用在app.js文件中,直接使用,如:this.globalData.hasLogin在其他非app.js文件中使用,需要先申明app变量,如:var app转载 2020-09-17 11:29:17 · 5702 阅读 · 1 评论 -
解决ios微信小程序弹框点击穿透问题
在弹框外层 加上catchtouchmove=“return” 即可<view class="box" catchtouchmove="return"> //略</view>原创 2020-08-19 17:12:32 · 2503 阅读 · 0 评论 -
解决微信小程序wx.getLocation定位不准的问题
最初我直接copy了文档下面的例子,上面type是wgs84 ,所以我也照着搬了过来。后来发现wx.getLocation获取当前定位发现,跑偏了600多米。最后发现这里:综上所述:抄作业有风险。此处应该用gcj02 Location: function() { var that = this; wx.getLocation({ type: "gcj02", success: function(res) { console.log(res) that.setDat原创 2020-08-19 16:18:06 · 9181 阅读 · 7 评论 -
微信小程序从当前位置,移动选点定位,获取经纬度
微信小程序移动选点定位,获取经纬度,然后我给加了从当前位置开始移动,以及防止移动跑偏太多,后加了右上角图标,回到当前位置的功能。<view class="container"> <map id="map4select" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" markers="{{markers}}" show-location bindcontrol转载 2020-08-13 17:51:55 · 1642 阅读 · 0 评论 -
微信小程序路线线规划,唤醒第三方导航app
<view bindtap="goNav">出发</view>goNav:function(e){ wx.openLocation({ latitude:34.567549629355, //纬度 longitude: 117.76223896886, //经度 name:"台儿庄古城", //目的地定位名称 scale: 15, //缩放比例 address: "枣庄市台儿庄区北岸路与康宁路交汇处" //导航详细地址 })},...原创 2020-08-11 17:01:39 · 890 阅读 · 1 评论 -
使用腾讯的微信小程序插件,路线规划导航
如果用微信小程序插件需要开发者秘钥:申请秘钥 <view bindtap="goNav">出发</view> goNav: function(e) { let plugin = requirePlugin('routePlan'); let key = '使用在腾讯位置服务申请的key'; let referer = '调用插件的小程序名称'; let endPoint = JSON.stringify({ //终点 'name': '上海火车站',原创 2020-08-11 16:41:27 · 944 阅读 · 0 评论 -
总结微信小程序路线规划导航,腾讯地图微信插件、唤醒第三方导航app、高德地图微信SDK、百度地图微信SDK优缺点
优缺点想比较:方法一、腾讯微信插件:优点:有所需时间,有优选条件(如红绿灯多少)。缺点:没有骑行导航。方法二、唤醒第三方导航软件:优点:导航功能更全面,还有语音功能。缺点:如果用户,没有安装,要下载软件。方法三、高德地图微信SDK:优点:有骑行导航。缺点:公交地铁、骑行没所需时间,没有优选方案。百度微信小程序API ,未完待续。欢迎留言探讨,指出不足!...原创 2020-08-11 16:24:05 · 2121 阅读 · 0 评论 -
this.setData给对象&&数组动态赋值
data: { longitude:121.45088, latitude:31.25145, forData:{ Monday:1, Tuesday:2 }, markers: [{ longitude:121.45088, latitude:31.25145, }] },赋值: this.setData({ latitude: 112, longitude: 23 }) //对象动态赋值 co..原创 2020-08-07 13:45:56 · 2546 阅读 · 0 评论 -
解决微信小程序scroll-view水平滚动&&隐藏滚动条
<scroll-view class='scroll_list' scroll-x="true"> <view wx:for="{{array}}" wx:for-index="index" wx:for-item="item" class='scroll_for'> <view class="icon_mian scroll_item" > <image src="{{item.img}}" class="icon_img">&.原创 2020-08-04 18:02:51 · 647 阅读 · 0 评论 -
微信小程序map组件展示当前位置&&修改标记点图标
方法一、<view> <map id="myMap" show-location class="container" style="width: 100%; height: 800rpx;" /></view>onShow: function() { this.mapCtx = wx.createMapContext('myMap') this.mapCtx.moveToLocation()}方法二、<map id="map" longitu原创 2020-08-04 14:49:25 · 4615 阅读 · 3 评论 -
微信小程序插件引入,地铁图插件、地图选点插件、地图选点插件
第一步:记住下面内容一定要写在app.json这个文件里 "plugins": { "subway": { "version": "1.0.9", "provider": "wx6aaf93c4435fa1c1" } }, "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" } }第二步:(pages/index/index.wxml)<view class="containe原创 2020-08-03 14:51:22 · 1928 阅读 · 2 评论 -
分享微信小程序,并接收参数,统计邀请人数
一、带参分享此处LoginInfoId是当前用户的id onShareAppMessage: function(res) { if (res.from === 'button') { // 来自页面内转发按钮 } return { title: "分享时的标题", path: '/pages/home/main?pid=' + this.LoginInfoId, //分享的页面 imageUrl: '/static/images/1234.png'原创 2020-06-09 16:30:17 · 2950 阅读 · 0 评论 -
微信小程序weui按需引入组件并使用
一、引入组件:通过页面下载基础样式必选二、引入基础样式原生写法在app.wxss最上方加入下面的代码或者 mpvue框架app.vue里引入@import '../static/weui-miniprogram/weui-wxss/dist/style/weui.wxss';三、引入组件 (home.json){ "navigationBarTitleText": "嗯嗯", //引入 "usingComponents": { "mp-searchbar": "../.原创 2020-05-29 17:11:20 · 1752 阅读 · 2 评论 -
微信小程序中自定义select下拉选项框
由于微信小程序没有像h5那样的select,所以决定自己写一个。此处是mpvue写的微信小程序<template> <div class="select_Box"> <div class="select_box" > <div @click="select=!select">{{select_box...原创 2020-04-28 16:10:49 · 1161 阅读 · 0 评论 -
wx.chooseImage微信小程序上传图片到服务器并用摄像头
微信小程序上传照片到服务器,,可选择从相册选取或者调用摄像头 <div class="box_upload"> <div class="upload_images"> <button @tap="fn_Upload" class="upload_input"></button> <!-- 默认背景图片 --> ...原创 2020-04-27 17:35:39 · 1258 阅读 · 0 评论 -
解决微信小程序radio无法自定义颜色&&mpvue 中radio点击两次才选中
问题一、mpvue 写的微信小程序最初总是出现:点击两下才选中问题之后把<radio color='#EA5A49' :value="item.id" :checked="goods_type_id==item.checked" /> 换成了如下内容,才解决了问题。<input type="radio" :value="item.name" class="radio" ...原创 2020-04-27 15:02:26 · 573 阅读 · 0 评论 -
微信小程序 picker 组件使用&&用mpvue开发时使用
一、微信小程序 picker 组件<view class="section"> <view class="section__title">日期选择器</view> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDat...原创 2020-04-19 15:26:51 · 264 阅读 · 0 评论 -
解决支付宝小程序&&微信小程序post请求后台接收不到参数的问题
支付宝小程序的post请求:my.request({ url: url, method: 'POST', data: { 'isv_code':'440720252', 'device_sn':'11' }, headers:{ 'content-type':'application/json',//默认值 }, dataType: 'json', suc...原创 2020-03-09 11:22:25 · 1404 阅读 · 1 评论 -
vue项目中用less
1、运行下面按钮npm install less less-loader --save2、配置webpack.base.conf.js{ test: /.less$/, loader: "style-loader!css-loader!less-loader", }把上面的内容加入位置如图所示:...原创 2019-11-22 09:52:33 · 178 阅读 · 0 评论 -
解决v-model在mpvue中不起作用
几个月前用mpvue写了个的微信小程序,突然发现v-model不起作用了<template> <div> <form action=""> <div class="btn"> <input placeholder="手机号码" placeholder-class="placeholder" type="text" v-mo...原创 2019-11-20 15:59:19 · 994 阅读 · 0 评论 -
封装微信小程序消息提示框
在mpvue框架中,封装微信小程序消息提示框。快速开发,少敲代码。若要多次使用,建议封装//新建toast.js文件,封装函数function showToast (params) { wx.showToast({ title: params, icon: 'success', duration: 2000 })}export default { sho...原创 2019-07-02 10:33:23 · 1134 阅读 · 0 评论 -
mpvue微信小程序tab选项卡切换功能源码
源码:<template> <div class="box"> <div class="nav"> <div :class="{'selected':tab === 1,'title':true}" class="default" @click="changTab(1)">干垃圾...原创 2019-07-03 15:55:06 · 947 阅读 · 0 评论 -
修改mpvue框架微信小程序中的appid
在项目中找到project.config.json文件,找到要修改的地方:原创 2019-07-16 10:27:01 · 639 阅读 · 0 评论 -
改mpvue框架中的单位配置,直接使用px
mpvue框架默认1px=0.5rpx;若不想在css中把写rpx,可直接在build/utils.js目录下找到如下:把此处的0.5改为1就可以了关于小程序单位rpx,官方文档有如下解释:个人见解,如有不足欢迎指正。...原创 2019-07-18 17:43:21 · 613 阅读 · 0 评论 -
mpvue单页面设置背景色的坑
mpvue单页面设置背景色的坑原创 2019-07-19 10:39:26 · 992 阅读 · 0 评论 -
判断H5页面环境是否在小程序的webview中
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script><script> var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger...转载 2019-08-26 09:51:03 · 2771 阅读 · 0 评论 -
从一个微信小程序跳转到另一个微信小程序源码
假设你要从小程序A=>B小程序,写在mpvue中的源码如下: <!-- A小程序中 --> <button class="nav-btn" @click="skip()">跳到别的小程序</button> <script> export default { data() { return { } }, ...原创 2019-09-05 14:13:28 · 4481 阅读 · 0 评论 -
mpvue小程序轮播图绑定动态点击事件
分享一个mpvue小程序轮播图绑定动态点击跳转页面,这个源码可以直接引用。原创 2019-06-19 21:45:44 · 902 阅读 · 0 评论