先看效果图 挺简单的一个实现方法,导入外部js数据,将数据通过radio-group展示出来,根据数据里的status属性判断显不显示该项. 在搜索框内实时读取输入的数据,去除空格后将数据跟js里的name属性模糊对比,如果不一致就通过status属性隐藏该项 大概是这样一个思路,最下面有代码片段 wxml <view> <view class="search"> <input placeholder=" 请输入国家名称" type=&

微信小程序的功能开发工具跟公众号的差别,小程序是一种减负思维对简单APP是巨大打击 摘要: 小程序和公众号最大的区别有如下四点:1.小程序没有粉丝,开发者在后台能看到的只能是累计用户访问数以及实时统计:2.小程序不能发送消息3.小程序没有webview,外链无施展之地4.小程序不能分享到朋友圈实现了张小龙说的:无需安装.触手可及.用完即走.无须卸载.在小程序中可以使用定位.拍照.录音.socket.音频.视频.文件.地图.重力感性.扫码等等,如此丰富的接口足以创造出新奇的应用出来.从小程序的理念

代码地址如下:http://www.demodashi.com/demo/14249.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现搜索关键词高亮 2.案例目录结构 二.程序实现具体步骤 1.index.wxml代码 <!--index.wxml--> <view class="container"

wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // wxml中引入模板 <import src="/wxSearch/wxSearch.wxml"/> <template is="wxSearch" data="{{wxSearchData}}"/> // wxss中引入 @i

通过第三方 JavaScript 库,扩展微信小程序框架功能. 扩展微信小程序框架功能(1)——Promise ES6 对 Promise 有了原生的支持,但微信开发者工具更新版本(0.11.112200)后, 移除了开发者工具对 ES6 中Promise 特性原生的支持, 需要引入第三方的 Promise 库. 扩展微信小程序框架功能(2)——Generator Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同. 扩展微信小程序框架功能(3)——函数功能增强

微信小程序支付功能的开发的时候坑比较多,不过对于钱的事谨慎也是好事.网上关于小程序支付的实例很多,但是大多多少有些问题,C#开发的更少.此篇文档的目的是讲开发过程中遇到的问题做一个备注,也方便其他开发的同学作为参考! 1.首先建议把官方文档支付部分看上三遍,每个细节都不要放过,因为任何一个点和微信要求不符都会导致支付不成功.https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=3_1 2.经过验证的微信支付功能,会需要一些商

(1) 查看微信小程序文档 大家可以从我截图中可以看到,API中的返回值有纬度和经度,所以我们接下来就是要用到纬度和经度逆地址解析出地址的一些信息. (2)注册腾讯地图开放平台 注册完之后选择WebServiceAPI 进入WebServiceAPI之后大家就可以看到逆地址解析了,然后阅读一下腾讯为我们提供的开放接口,我们可以直接用GET请求获取地址的具体信息了,腾讯具体给我们的返回值大家可以注册一下进去看一看,很具体的.我直接上js代码 getCityNameOFLocation: funct

微信小程序--分享功能 微信小程序前段时间开放了小程序右上角的分享功能, 可以分享任意一个页面到好友或者群聊, 但是不能分享到朋友圈 这里有微信开发文档链接:点击跳转到微信分享功能API 入口方法: 一,小程序右上角自带的分享功能(...): 以下代码实例写在export default { };里面 //右上角分享功能 onShareAppMessage: function(res) { var that = this; return { title: that.article.title,

在微信小程序里的搜索框,按软键盘回车键触发搜索事件. <input type="text"  placeholder="搜索" value="{{inputVal}}"  bindinput="inputTyping" bindconfirm="search" /> bindconfirm  即为回车事件,为它绑定上需要触发的事件.search是对应的搜索方法.

setTimeout(func, time)可以使得每隔time毫秒就执行一次func函数,常用来做计时器/时钟. 下面是在微信小程序中的使用思路,只截取了关键部分代码. var timer; // 计时器 Page({ // ...省略 // 自定义的开始按钮 startBtn: function () { console.log("开始按钮"); Countdown(); }, // 自定义的暂停按钮 pauseBtn: function () { console.log(&quo

最近开始负责公司webapp数据打通支付宝小程序,之前已经打通了微信小程序,现在根据支付宝小程序的开发文档在之前的模板上面做修改. 在修改模板的过程中,总结一下双方功能和语法糖的不同之处. 框架: app.json 配置列表 支付宝小程序 微信小程序 window 属性 支付宝小程序 微信小程序 tabBar 属性 支付宝小程序 微信小程序 事件绑定:微信绑定事件用的是 bind 前缀, 事件名称首字母小写 (例如:bindtap):支付宝绑定用 on 前缀,事件名称首字母大写(例如:onTap

微信小程序端的点赞功能其实没什么好介绍的,无非就是调用接口改变点赞状态和点赞数量.需要注意的是取消点赞时的处理,我这里为了减少服务器接口的调用,直接本地存一个变量,修改这里的变量值即可. 由于源码都相对简单,这里就直接贴源码了. wxml布局源码如下: <view class="button-area" catchtap="onLikeClick"> <block wx:if="{{isLike}}"> <text

只是分享一下小程序支付功能的前端流程和代码, 仅供参考(使用的是uni app). handleCreate () { /** 第一步:前台将商品数据发送到后台,后台创建订单入库并返回订单id等信息 */ uni.request({ url: '/testApi/wxPay/insert', // 创建订单接口 method: 'POST', data: { openId: '获取到的该用户的openid,必传', number: '商品数量', goodsId: '商品id', goodsFe

更多解读可使用博客: https://www.jianshu.com/p/86d73745e01c 实现流程:1.在文本框中输入关键字key,如"比赛",检索出比赛相关的列表key = 小程序2.处理结果列表:在key的前后加分隔符,如"%%"3.通过第2步的分隔符进行切割,获取新的数组:str.split("%%")4.页面for循环上面的新数组:与key相等,则高亮显示,否则常规样式显示wxml: <!-- 搜索并高亮关键字 -->

前言 其实在 2019 年上半年,微信就发布了基于小程序页面的搜索. 为了更好地发现及理解小程序的页面,结合过去一段时间来我们遇到的各种情况,强烈建议各位开发者花一些宝贵的时间认真阅读本文. 小程序爬虫 爬虫访问小程序内页面时,会携带特定的 user-agent "mpcrawler" 及场景值:1129 当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引. 当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中. 注意事项:若小程序爬虫发现的页面数据和

只提供微信小程序端代码: var app = getApp(); Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 var that = this //登陆获取code wx.login({ success: function (res) { console.log(res.code) //获取openid that.getOpenId(res.code) } }); }, getOpenId: f

首先看看微信小程序上的选项卡的效果 原理呢,就是先布局好(这就不必说了吧),然后在上面的每一个选项卡上都定义一个同样的点击事件,然后给每一个组件上绑定一个唯一的标识符,然后点击事件触发的时候,获取到绑定的标识符,判断当前点击的是哪个选项卡,然后再判断下面该显示哪一块,现在上代码: wxml: <view class="menu_box"> <text class='menu1 {{menuTapCurrent=="0"?"borders&

微信小程序转发涉及以下4个方法: 1.Page.onShareAppMessage({}) 设置右上角“转发”配置,及转发后回调函数返回 shareTicket 票据 2.wx.showSahreMenu() 用户点击右上角后,显示“转发”按钮 3.wx.hideShareMenu() 隐藏转发按钮,无视 Page.onShareAppMessage({}) 4.wx.getShareInfo({}) 根据 shareTicket 获取已加密的群信息 把转发流程切分:转发前配置->转发时->转

小程序保存图片功能实现 wxml: <view class="previewImage" style="display:{{previewImage}}" bindtap="closePrev"> <image src="{{img.url}}" mode="aspectFit" style="width:100%;height:100%;" catchlongtap=

表示被微信小程序坑惨了 糟心的开始写,老板说先不上太复杂,就先显示了两个页面,然后开开心心的发布,测试了几遍,没啥问题呀.结果,一上上去,就被老板批了! 啥呀! 这分享怎么这个鬼样子!明明我看文档都是这样写的啊!Page({ onShareAppMessage: function () { return { title: '自定义分享标题', desc: '自定义分享描述', path: '/page/user?id=123' } } })我也就是这样写的, 就改了下title和desc, pa

前言:虽然小程序做过很多,但是一直觉得微信支付功能很是神秘,现在终于有机会接触心里还是有点小激动的,经过一番折腾发现支付也不过如此,在此记录下支付功能的实现过程 小程序的官方文档介绍到发起微信支付即调用API wx.requestPayment(Object object) wx.requestPayment({ timeStamp: '', nonceStr: '', package: '', signType: 'MD5', paySign: '', success(res) { }, fa