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

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

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

search.wxml <view class="header"> <view class="search"> <icon type="search" size="18" color=""> </icon> <input type="text" confirm-type="search" bindconfirm=&

代码地址如下: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"

微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type="tel" bindinput="getInput" /> js Page({ data:{ getInput: null }, getInput:function(){//方法1 this.data.getInput = e.detail.value; }, /

微信小程序--仿微信小程序朋友圈Pro(内容发布.点赞.评论.回复评论) 项目开源地址M朋友圈Pro 求个Star 项目背景 ​ 基于原来的开源项目 微信小程序仿朋友圈功能开发(发布.点赞.评论等功能)的基础上,终于推陈出新了. 有一说一,这次界面好看多了.至于推陈出新的原因很简单

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

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

在微信小程序里,如何获得用户输入的内容?? js: document.getElementById("Content").value jq:$("#Content").val() 在微信小程序中并不能这样写. 可以通过组件的属性 bindchange 将用户输入的储存存起来 test.wxml <input id="postalCode" bindchange="bindChange" type="number

最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. 首先我们在github上下载wxParse 首先我们在github上下载wxParse  GitHub icindy/wxParse wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown解析. Contribute to icindy/wxParse

大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 后来,小程序增加了「rich-text」组件用于展示富文本内容.然而,这个组件存在一个极

主要是为了调用微信小程序msgSecCheck.imgSecCheck接口. 先附上小程序接口说明文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/sec-check/msgSecCheck.html 1.首先要获取access_token(需要appId.appSecret.grant_type这个是固定值): ###msgSecCheck接口: 2.用获取到的token带入到微信端的接口地址: https:/

今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展现在这个小程序里面,一目了然)用户第一次登陆的时候,是没有绑定手环ID的,这个时候就需要弹出提示框,提示确定跳转到绑定手环id的页面,绑定成功之后,就会跳转到首页,首页显示手环的电量,手环拥有者的心率运动血压等具体的数据. js逻辑原理很简单:以下代码仅供参考 //获取应用实例 const app = getApp() Page({ da

提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: }) wx.hideToast() 隐藏消息提示框 wx.showToast({ title: '加载中', icon: 'loading', duration: }) setTimeout(function(){ wx.hideToast() },) wx.showModal(OBJ

小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. 首先我们下载wxParse,github地址:https://github.com/icindy/wxParse 1.下载完之后我们需要用到目录下的wxParse文件夹,把他拷贝到我们的项目目录下(与pages同级目录) 2.然后,在app.wxss全局样式文件中,需要引入wxParse的样式表 @import "wxParse/wxParse.wxss"; 3.在需要加载h

由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框. wx.showModal修改样式后的效果,如下图所示: index.wxml代码: <!--index.wxml--> <button class="show-btn" bindtap="showDialogBtn">弹窗</button> <!--弹窗--> &l

1.wx.showToast() 方法可以配置toast框的提示文字,消失的时间,显示的图标 wx.showToast({ title: '请链接网络', icon:"none", // 没有图标时,使用none duration:2000 })

wx.showToast({ title: '成功', icon: 'success', duration: 2000, success:function(){ console.log('haha'); setTimeout(function () { //要延时执行的代码 wx.switchTab({ url: '../user/user' }) }, 2000) //延迟时间 } }) 关注微信公众:lovephp

1.页面代码 <view catchtap='showInputLayer' class="btn_pay">立即支付</view> <!-- 密码输入框 --> <view wx:if='{{showPayPwdInput}}'> <view class='bg_layer'></view> <view class='input_main'> <view class='input_title'&

一.wx.showToast 如上图所示,showToast会显示一个弹窗,在指定的时间之后消失.中间的图标默认只有加载中和成功两种,也可以用image参数自定义图标 wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) 参数说明: 二.wx.showModal showModal不会自动消失,在可以在用户点击确定后跳转到其他界面 wx.showModal({ title: '提示', content: '暂无错题-', s