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

开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节.实现效果如下: 官方参考链接:https://developers.weixin.qq.com/miniprogram/dev/component/input.html wxml: <view class='page_row' bindtap="suo"> <view class="search"> <view cla

微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用,于是乎,看了官方文档,自己封装一个组件. 我是谁 直接上主题 在根目录下创建components文件夹 在components下开始创建自己的组件 效果图如下: 由于我使用的是flex布局,所以 我从哪里来 # wxml <view class="images-box"> &l

1微信的request的post请求后台获取不到data(当初这个问题纠结了好久好久),原因是post传递的data是json格式而不是key,value的格式,所以获取不到相应的data就是post请求应为表单模式的data,微信小程序提供的datajson格式完全获取不到. 解决方法: 1.改变header header: {'Content-Type': 'application/json;charset=UTF-8;'}, 2.query的格式传递post请求就可以了,不过这个有点..你

目录 1,前言 2,思路 3,代码逻辑 1,前言 项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干.先上效果图.源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链接. 2,思路 博主第一时间想到的就是使用split,根据搜索的关键词,处理后台返回的数据,然后indexOf找到关键字,给每个字添加deep字段,deep为true,则高亮,为false,则正常.由于是小程序,所以楼主直接做成了一个高亮组件,代码很简单,实现步骤如下. 3,代码逻辑 模拟数据如下

参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 1  创建项目 开发者工具安装完成后,打开并使用微信扫码登录.选择创建"项目",填入上文获取到的 AppID ,(无appid直接选择)设置一个本地项目的名称(非小程序名称),比如"我的第一个项目",并选择一个本地的文件夹作为代码存储的目录,点击"新建项目"就可以了. 为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择

简单的小程序示例结构: (一):理解小程序结构app.js,app.json,app.wxss ①app.js,app.json是小程序结构必要的部分,app.wxss可选择 ②app.js用于创建小程序实例,以下是自动生成的示例代码 //自动生成的示例代码 App({ /** * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) */ onLaunch: function () { }, /** * 当小程序启动,或从后台进入前台显示,会触发 onShow */ onShow:

微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果 下面来看一下代码: 首先WXML <view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{selectData[index]}}</text> <image class='select_img {{show&&&q

一 组件及api网址: 组件 :https://developers.weixin.qq.com/miniprogram/dev/component/view.html api:https://developers.weixin.qq.com/miniprogram/dev/api/ 二 简单步骤 第一个微信小程序 右键 ->新增目录 -> firstPage 右键 ->新建js -> 输入Page ->自动生成Page内容 修改根目录下app.json内容将first.js

1.微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有色的使用体验. 2.手机端App的另外一种新的展现形式 3.无需下载过多占用手机内存的app,小程序直接打开 小程序必备技术点: HTML javaScript CSS 并不是所有的app都适用小程序 基于腾讯庞大的社交群体,可以为原生app疏导 创业公司优先推出小程序,开发成本低. 当做简单的工具使用,需要在app上频繁crud不适用 小程序注册流程 需要有公众号( 未认证个人/认证企业) 需要邮箱 完善

微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 .wxml 1 2 3 <modal hidden="{{hidden}}" title="这里是title" c

简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具 前端:界面布局样式和js的跳转 后端:依靠SpringBoot的业务逻辑层 项目的码云地址: https://gitee.com/zhege/WebChatDemoJava 微信开发工具的使用和代码的结构及其含义参考 https://developers.weixin.qq.com/miniprogram/dev/ 后端业务逻辑的完成 1.数据库的创建 工具:Navicat 2. dao层及其方法的实现 1>b

折腾到半夜,搞得挺兴奋,总结一下,免得忘了: 1.微信小程序直接获得的是一些简单信息,基本无用 2.用户唯一标识是openid,还有一个unionid是关联多个公众号之类情况下用,我不大关心 3.在getUserInfo的返回数据中,有加密信息, wx.getUserInfo({ success: function(res) { } }) res包括userInfo,iv,rawData,signature,encryptedData,这些东西的关系比较复杂,我理解是这样的: 1)userInf

查看一下服务器接收的post 参数是以什么形式接收的 微信给出得demo 请求的方式是Json 参数传递的 所以如果服务器使用的from 表单形式接收数据需要更改微信小程序中的 header 将 header: { 'content-type': 'application/json' }, 改成 header: { 'content-type': 'application/x-www-form-urlencoded' },

以下问题测试环境为微信开发者0.10.102800,手机端iphone6,如有不对敬谢指出. 根据我的测试,context.drawImage,在开发者工具中并不能画出来,只有预览到手机中显示. wx.canvasToTempFilePath wx.saveFile 官方文档中只有一行,真是坑爹啊,原来 wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete,和wx.saveFile差不多: wx.canvasToTempFi

来自:微信小程序联盟 如果大家使用小程序的同时还在使用公众号的话,可能会用到unionId这种功能,由于公司业务需要,我们需要使用unionId,具体使用方法,请参考微信开放平台的说明,但是在微信小程序的文档中只给出了部分语言实现的源码,竟然没有java的,小程序的开发人员是有多么懒.难道大家都不用java写后台??? 什么鬼,然后开始了各种AES踩坑之路,其实参考了很多的网上的教程,再次不能一一列出来给大家了,(因为我写这篇文章的时候,已经是解决问题一周以后了),也收到管理员的很多帮助,再次写

效果图 上图是小程序端实现的搜索功能效果图. 从图中可以看出点击首页搜索按钮即可进入搜索页面. 布局样式是:搜索框 + 热搜内容 + 搜索列表. 搜索框使用 lin-ui 中的 Searchbar组件. 热搜内容的单个按钮使用 lin-ui 中的 Tag组件,而实现云标签样式的布局是用css样式控制. 搜索列表使用 lin-ui 中的 WaterFlow布局组件. 搜索框实现 搜索框就是照着 Searchbar组件 文档实现,因此wxml布局如下: <l-search-bar placehold

方法有两种: 一:采用css的zoom属性 zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状. 二:采用css3的transform:scale属性 zoom缩放会将元素保持在中间,不会改变元素原来的形状,但是可能会有稍稍的模糊. 整体来说zoom属性与transform:scale属性主要存在如下几点差异 1.zoom的缩放是相对于左上角的:而scale默认是居中缩放:2.zoom的缩放改变了元素占据的空间大小:而scale的缩放占据的原始尺寸不变,页面布局不会发生

在写小程序的时候,一般会碰到底部弹出动画,就像下面这样的效果 直接进入正题 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html 1.首先需要写点击触发事件 <view class='text' bindtap='chooseSezi'>请选择:颜色/尺码</view> 这是点击之后需要弹出的内容,为了方便我把里面的内容去掉了,maskLayer是遮罩层,choose是内容 <!--隐藏区域 --&g

异常描述: 如下图,输入手机号码之后,点击右侧的获取验证码,在开发工具是OK的,真机测试无反应: 页面编码跟H5差不多的,H5没出现这个问题,但是小程序就不一样了. 异常分析: 页面结构层面,为了方便样式排版,手机号码输入框跟验证码输入框是一样宽的,获取验证码的层以绝对定位的方式固定在手机号码输入框的右边,如下: 对于H5来说,这个并没有什么影响,但是小程序中,这种排版,就不行了. 光标一旦进入文本框,在没有收起输入键盘或者点击文本框外其他地方的时候,文本框的聚焦状态是不会改变的. 也就是说上边

1.进入开发设置-消息推送,启用消息推送 url: 启用并设置消息推送配置后,用户发给小程序的消息以及开发者需要的事件推送,都将被微信转发至该服务器地址中. 2.创建消息模板. 3.WXML代码: 4. 获取 access_token 发送模板消息 注意:formId只有在手机上才能看到,开发工具上是看不到的. 5. 这只是在前台开发的,要想推送消息,应该将推送消息等参数发送到后台接口,由后台来实现推送消息.