微信小程序
Semoon呐
凡是能用JavaScript来实现的,最终都会用JavaScript来实现!
展开
-
微信小程序的更多玩法—骨架屏
微信小程序开发工具又一次的惊艳到我了~~~~1.支持生成某个页面的骨架屏只需将开发工具更新到1.03版本即可开启完美体验2.骨架屏的惊艳效果图一般移动端都是需要开发者去做骨架屏的技术的。简介骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。很多项目中都有应用:ex:饿了么h5版本,知乎,facebook等网站中都有应用。来源地址:https://www.php.cn/x原创 2020-07-24 18:03:08 · 540 阅读 · 0 评论 -
不同坐标体系的转换
地图坐标转化一、主流地图商使用的坐标体系GCJ-02GPS,WGS-84二、微信小程序中使用百度转腾讯腾讯转百度一、主流地图商使用的坐标体系腾讯、高德:GCJ-02百度:BD-09坐标,只适用于百度地图相关产品,在GCJ-02坐标系的基础上再次加密偏移后形成的坐标系搜狗:搜狗坐标,只适用于搜狗地图相关产品谷歌地球:GPS坐标,是度分秒形式的经纬度坐标。在国内不允许使用。必须转换为GCJ-...原创 2020-04-01 19:00:05 · 1293 阅读 · 0 评论 -
微信小程序:WeUI组件库踩坑
首先,本来只是个引用-调用组件库的小case,最后调用时发现微信官方文档有bug,调用不了。。。然后发现有很多人都遇到这个问题弃坑了,我来解决一下~~~WeUI组件库一、使用npm下载组件库1.npm init2.npm i weui-miniprogram -S --production3.工具-构建npm二、调用样式、组件1.调用weui的样式,此处采用全局加载(app.wxss)2.调用组...原创 2020-03-27 16:01:43 · 3700 阅读 · 5 评论 -
css 实现现直播聊天区域顶部渐变效果
关键词:顶部渐变/渐隐,-webkit-mask-image简介:首先,关于这个文章的标题做一下说明,目的是要实现这个效果,但是在类web的应用领域专业术语叫【蒙版效果】,或者遮罩效果(了解css3的孩儿们提到“蒙版”是不是很简单了),至于为什么叫聊天区域顶部渐隐的效果,是因为度娘的搜索结果都是APP端的实现技术。。。绕远了~~~效果:来吧,先上最终解决的代码,,,看完有笑点...原创 2020-03-24 16:19:30 · 1545 阅读 · 5 评论 -
微信小程序:解决canvas渲染失败
微信小程序:解决canvas渲染失败背景 关于一个乘车项目,最近由于发码平台在做系统升级,导致服务不稳定,所以发现了一个新的问题——canvas渲染失败。业务 当申码的通讯请求状态为50*时,页面会引导用户进行刷新操作,那么问题来了,当用户刷新后,第一次请求为200时,canvas不渲染,此时前端确定收到了qrcode,只有当下一次再接收到应答,才会渲染乘车码。解决 思路:保留ca...原创 2019-12-18 18:28:44 · 4915 阅读 · 0 评论 -
微信小程序:批量订单倒计功能的实现
微信小程序:批量订单倒计时功能的设计与实现需要满足的基本需求一.订单模块分为 全部---待付款---待提货1.效果图二.全部订单列表中,只倒计时“待付款”状态的订单三.待付款的订单,当倒计时结束时,置订单状态为“已过期”需要满足的基本需求一.订单模块分为 全部—待付款—待提货1.效果图二.全部订单列表中,只倒计时“待付款”状态的订单三.待付款的订单,当倒计时结束时,置订单状态为“已过期...原创 2019-12-17 16:49:58 · 1078 阅读 · 1 评论 -
微信小程序 使用 npm 安装第三方包
1.确保电脑上有node环境2.打开项目文件在硬盘中的位置3.长按shift+鼠标右键,选择power shell4.在power shell 界面,执行命令(1)init指令会询问一系列的问题,并将你的配置写成一个package.json文件。-f:会生成一个默认的package.json文件。npm init -f(2)若还需要继续使用npm下载对应文件,继续使用命令npm ...原创 2019-10-24 15:45:35 · 858 阅读 · 0 评论 -
在微信小程序中实现调试H5页面,集成调试器
在微信小程序中实现调试H5页面,集成调试器1.业务场景 因为要在小程序中使用H5页面,H5的数据请求都需要从小程序跳转时携带token等用户登录信息,再加密,所以迫切希望能在开发者工具中打开H5的调试器,方便快速开发。2.资源 版本:vConsole v3.3.2 地址:https://github.com/Tencent/vConsole 使用:下载到web项目的工具包中,...原创 2019-09-09 10:46:09 · 4087 阅读 · 0 评论 -
小程序web-view加载H5页面,调用手机APP地图导航
小程序web-view加载H5页面,调用手机APP地图导航1.需求业务背景:微信小程序中要使用H5页面做卡券广场,为什么不用原生的小程序做?因为要尽可能实现多端复用,这款产品已经在研发APP。好了,我们说业务,卡券列表主要是以店铺为模块展示,商家名称、商家地址、产品图、产品介绍,卡券(券值、抵扣门槛、有效期、卡券状态、购买按钮等信息),用户点击商家位置可以调用小程序地图,查看线路推荐能调用手机...原创 2019-09-09 10:33:57 · 5420 阅读 · 3 评论 -
微信小程序:自定义单选框样式,修改点击区域大小
1.wxmlradio .wx-radio-input.wx-radio-input-checked::before{ border-radius: 50%; width: 12rpx; height: 12rpx; text-align: center; font-size:0rpx; /* 对勾大小 去掉 */ background-color: #C...原创 2019-09-26 15:10:13 · 2694 阅读 · 0 评论 -
小程序里的h5页面调起小程序支付
小程序里的H5页面调起小程序支付实现思路:在H5页面点击支付回跳到小程序,打开支付页调小程序支付,不支持小程序里的H5页面调用H5的微信支付代码H5代码<body > <div class="container"> <button onclick="testPay()">支付</button> </div> &l...原创 2019-07-30 11:40:44 · 6425 阅读 · 0 评论 -
微信小程序:监听二维码是否被使用,开启全局websocket,在其它页面接收消息
业务场景适用于:在其它页面悬浮二维码,用户点击后在当前页面展示二维码,监听是否被扫,接收消息消费了多少钱,五秒后重新展示乘车码,用户可关闭二维码展示栏,继续浏览页面。1.在app.js中开启websocket,并暴露接收消息的方法onLaunch: function(options) { const that = this that.websocket() ...原创 2019-07-30 11:33:38 · 4004 阅读 · 0 评论 -
微信小程序:从小程序打开H5页面
1.样式2.两个wxml第一个wxml<view > <navigator url="../testH5/index" > 点击跳转到H5页面 </navigator> </view>第二个wxml<view> <view> <web-view src="https://...原创 2019-07-11 11:25:10 · 21991 阅读 · 0 评论 -
微信小程序:重写微信提示框+自定义提示框
第一种:修改微信提示框 按钮的内容wx.showModal({ title: '提示', content: '您已开通微信无感,享受“先出场,后支付”的权益', showCancel: true, //是否显示取消按钮-----》false去掉取消按钮 cancelText: "", //默认是“取消...原创 2019-07-07 20:48:48 · 2676 阅读 · 0 评论 -
微信小程序:集成客服功能+自定义样式
微信小程序:集成客服功能页面效果客服功能的样式有两种:1.微信固定的样式效果见红框缺点:不能改变宽、高,设置背景色不在中心,样式不能变动。 <!-- 客服模块 --> <contact-button class='' type="default-light" size="27" session-from="webapp"></contact-but...原创 2019-07-02 10:50:07 · 3205 阅读 · 0 评论 -
微信小程序——自定义弹窗组件并校验车牌号
微信小程序——校验车牌号1.界面样式2.主要的业务逻辑触发弹框获取input输入框中的内容与正则表达式匹配页面给与相应的弹框提示3.代码片段1.wxml文件 - ‘添加车辆’的触发事件入口 &lt;view class="add-btn" bindtap="addCarBtn"&gt; &lt;image src=&quo原创 2019-03-05 15:20:56 · 2717 阅读 · 0 评论 -
微信小程序——走过的坑
微信小程序——走过的坑1.text标签text标签不能设置widthwxml使用多个空格(&amp;nbsp;),要添加 decode=’{{decode}}’js文件中设置decode为truedata: { decode:true, },2.wxss设置page整个页面的背景色 page{ background-color: #F2F2F2; }...原创 2019-03-05 16:48:20 · 555 阅读 · 0 评论 -
微信小程序——上拉加载更多
微信小程序——上拉加载更多1. 业务逻辑:参考分页逻辑2. 踩坑注意页面高度当查询的数据不满一页时,上拉无效3. 代码 data: { list:[], date:&quot;请选择查询日期&quot;, enddate:new Date, upstation:'', busnumber:'', uptime:'', dealdate:'', ...原创 2019-03-05 18:14:58 · 563 阅读 · 0 评论 -
[解决方案]微信开发者工具中的代码模块不显示
[解决方案]微信开发者工具中的代码模块不显示1.在控制台输入openVendor2.在弹出的文件夹里,清除wcsc wcsc.exe3.重启开发者工具4.如果失效,重启电脑,再重复上述操作...原创 2019-03-07 12:04:11 · 4416 阅读 · 0 评论 -
[功能]微信小程序——使用百度地图定位
[功能]微信小程序——使用百度地图定位1.申请百度地图的开发权限——&amp;amp;gt;用appid拿到AK 步骤 1.http://lbsyun.baidu.com/apiconsole/key2.邮箱激活3.拿到AK4.配置到自己的微信小程序中module.exports = { baiduAK: 'ScBNp8ElRVXt7WLkTeVeeWGhd9GQwgKB'}5.请求百...原创 2019-03-07 15:02:03 · 4844 阅读 · 1 评论 -
微信小程序——实战:发起微信支付,并根据支付结果显示页面
微信小程序——实战:发起微信支付,并根据支付结果显示页面1.界面2.项目结构3.核心代码1.trade.js封装前端流水号module.exports = { tradeno: function() { var e = new Date().getTime(); return "fk" + parseInt(1e11 * Math.random(...原创 2019-03-19 17:49:54 · 7632 阅读 · 3 评论 -
微信小程序——动态切换class以及bindtap事件
微信小程序——动态切换class以及bindtap事件1.界面样式2.功能需求当在场车辆无交易订单时(查询到的金额为0时),支付按钮置灰,不能触发事件坑:·class和bindtap根据查询到的金额是否大于0切换·切换的class要有引号,否则失效3.代码<view class="car-info" wx:if='{{show}}' wx:for="{{cars}}" ...原创 2019-03-15 18:34:51 · 5535 阅读 · 0 评论 -
微信小程序——下拉刷新
微信小程序——下拉刷新1.界面样式2.业务需求 用户可以手动下拉刷新 坑: 1.真机测试不弹回 解决方法: 下拉刷新事件中增加停止事件 2.下拉刷新中使用wx.showToast等交互反馈,会导致反弹距离过大的问题,依然还是存在无法完全弹回的问题。 所以,一定不能用微信自带加载动画 3.下拉看不到图标3.代码 //js文件中——下拉刷新...原创 2019-03-15 19:15:25 · 6132 阅读 · 0 评论 -
微信小程序——自定义键盘:自定义组件和父组件通过事件进行属性同步
微信小程序——自定义键盘:自定义组件和父组件通过事件进行属性同步自定义组件触发事件时,需要在自定义组件中使用 triggerEvent 方法,指定事件名、detail对象和事件选项:在对组件进行封装时 在当前页面想要获取组件中的某一状态,需要使用到this.triggerEvent(’ ',{},{}),第一个参数是自定义事件名称,这个名称是在页面调用组件时bind的名称,第二个对象就可以将...原创 2019-03-19 17:24:11 · 3740 阅读 · 2 评论 -
微信小程序:用户授权获取微信头像、昵称、手机号
微信小程序:用户授权获取微信头像、昵称1.授权界面2.小程序显示用户头像,昵称3.登陆授权的代码login.jsallowTable:function(){ wx.switchTab({ url: '../table/table', }) },login.wxml<view class="box"> <view...原创 2019-03-28 11:52:31 · 31079 阅读 · 3 评论 -
微信小程序:校验真实姓名和身份证号
微信小程序:校验真实姓名和身份证号1.界面2. 代码login.wxml<view wx:if="{{role}}"> <view class="box"> <view class="title"> 完善身份信息 </view> <view class="warn">...原创 2019-03-28 17:58:17 · 31397 阅读 · 14 评论 -
微信小程序:向后台返回的数组中添加新的字段[key,value]
微信小程序:向后台返回的数组中添加新的字段[key,value]1.业务需求请求a返给我所有的车辆信息,用一个数组cars接收,遍历这个数组拿到车牌号,每拿到一个车牌号去发送b请求查询是否开通微信车主服务,并用新的字段去接收车辆状态,再把新的字段放到cars里面,页面进行数据渲染。2.效果图3.实现方式一:直接给数组cars:status+属性值问题:for循环嵌套http请求,出现...原创 2019-04-17 18:11:13 · 6181 阅读 · 0 评论 -
微信小程序——小程序自己的页面弹框
微信小程序——小程序页面弹框1. 页面样式:2.代码块在这里插入代码片(一).wxml文件中第一块:给一个触发事件&lt;image src="../../img/icon-delete.png" bindtap='deleteCar' data-id='{{car.platecard}}' class="icon"&gt;&lt;/image&gt;原创 2019-03-05 14:54:57 · 3884 阅读 · 0 评论