需求:留言可以点赞,点过赞之后图标变化,没人只能点赞一次,留言可以在留言 index.wxml <view class=liuyanbox><view class=ly-title clear><view class=llt-left fl>邻居评论({{yanlist.count}})</view><view class=llt-right fr data-id="0" data-user="{{list.user_id}}" bindtap=liuynChange>我要留言</view></view><view><view class=xunhuan wx:for="{{yanlist.list}}"><view class=zuobianll><view class=ll-content cl...
本文实例为大家分享了微信小程序实现留言板的具体代码,供大家参考,具体内容如下CSS: /* pages/order/message2/message2.wxss */.msg-box{padding: 20px;}.send-box{display: flex;}.input{border: 1px solid #B0C4DE;padding: 5px;} .msg-info{display: block;margin: 10px 0 0 0 ;color: #339900;}.place-input{color: salmon;}.list-view{margin: 20px 0 0 0;}.item{overflow: hidden;border-bottom: 1px dashed #87CEFF;heig...
简单总结一下微信动画的实现及执行步骤。 一、实现方式 官方文档是这样说的:①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。 因为小程序是数据驱动的,给这句话加上数字标注分为三步:前两步是定义一个动画并设置都要干什么,然后把这个设置好的“规则”扔给界面上的某个元素,让它按照这个规则执行。 当然如果有多个元素的animation="{{...
这篇主要讲组件通讯 (1)父组件向子组件传值: <header title={{title}} bind:fn=fn id=header></header>通过title={{title}}传向子组件向子组件传递参数 子组件接收参数: Component({properties: {title: { // 属性名 type: Number, // 类型(必填)type: String,//目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)},fn: { type: Function,},},data: {},methods: {// 子组件调用父组件方...
初次接触js弄了好长时间才出来效果,但是还是觉的不做梦完美,希望有更好的方式进行交流;实现效果如下: 虽说这个小功能但是对于我这个新手来说还是有点难;具体代码如下: WXML: <view class="backgrout-bj"><view class="header">最多可增加4个功能入口</view><view><block wx:for="{{model}}"><view class="model-list" bindtap="selectClick" id="{{index}}"><view><image class="middle-img" src="{{item.image}}"></image>...
本文实例为大家分享了微信小程序实现左滑修改、删除的具体代码,供大家参考,具体内容如下 wxml: <view class="offer-item" wx:for-items={{offerList}}><!--这里绑定了刚才说的3个函数分别为 touchS,touchM touchE--><!--这里注意这个 style="{{item.txtStyle}}" ,这是我们一会再js中 将要设置的样式 --><view style="{{item.txtStyle}}"><view class="offer-item-top fl clearfix" bindtouchstart="touchS" bindtouchmove="to...
最近在研究微信小程序,自己写demo的时候想要引用巴里巴巴图标库的图标,于是: @font-face {font-family: iconfont;src: url(iconfont.eot);src: url(iconfont.eot?#iefix) format(embedded-opentype),url(iconfont.woff) format(woff),url(iconfont.ttf) format(truetype),url(iconfont.svg#iconfont) format(svg); } .iconfont{font-family:"iconfont";font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-...
上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓。内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支付接口的调用,经过一番研究,总算打通了两边的交互。 大概流程 1、先说明涉及到的文件,下面会用到 1.1 app.js:小程序的app.js文件,在globalData里定义一个全局变量paySuccessUrl: ,用来保存支付成功跳转url 1.2 wxminiwebview.js:小程序中放web-view的界面 1...
需求小程序语音识别,全景图片观看,登录授权,获取个人基本信息 一:基础框架官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/ (其实官方文档写的很清楚了)1.跟着官方文档一步一步来,新建一个小程序项目就好 2.然后呢,毕竟默认的只是基本骨架,肌肉线条还是要自己填的 app.json 是当前小程序的全局配置小程序的所有页面路径、界面表现、网络超时时间、底部 tab需求一:底部tab,我们要像原生APP那样要有是三...
由于微信小程序没有提供类似 Image 这样的 JS 对象,要实现图片的预加载要麻烦一些, wxapp-img-loader自定义组件可以在微信小程序中实现图片预加载功能。 使用 1、下载 wxapp-img-loader项目源代码(https://github.com/o2team/wxa...),将 img-loader 目录拷贝到你的项目中 2、在页面的 WXML 文件中添加以下代码,将组件模板引入 <import src="../../img-loader/img-loader.wxml"/> <template is="img-loader" data="{{ imgLoad...
前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主要思路就是使用canvas绘图,把剪裁的图片绘制成圆形,另外剪裁图片的窗口还可以移动放大缩小,这个功能就用了微信组件movable-view,好了,该说的也说完了,下面咱们开始撸代码。 movable-view组件 可移动的视图容器,在页面...
首先我们在pages文件夹下创建components目录用于存放自定义组件。如图所示,以我创建的dialog组件为例,自定义组件的格式与页面一样,分为4个文件。 图1 图2 如上图2所示,假如index页面有一个按钮触发点击事件后弹出dialog,并且当点击某个部门时,将dialog关闭,并将部门名称与红色标题同步。 一、首先把dialog组件的样式写好,并在index页面相应的位置引用。以下就是代码啦(分别为:wxml、wxss、js...
列表渲染 wx:for 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。<view wx:for="{{array}}">{{index}}: {{item.message}} </view>Page({data: {array: [{message: foo,}, {message: bar}]} })使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名:<view wx:for="{{...
【小程序】提交订单页面到订单详情页面,如何防止无法回到主页 问题场景: 小程序某个页面完成后,希望跳转到另一个相关页面。 比如,订单提交完成后,希望跳转到订单详情页面,可选的方案有两个A 使用 wx.navigateTo 跳转到非 tabBar 页面优点是有返回按钮,可以一步一步的返回到主页 缺点是用户体验很差,还有可能重复发布订单B使用 wx.redirectTo跳转到非 tabBar 页面优点是,不会返回旧页面 缺点是,无法返回主页,造成死循环 ...
注:没有在微信开放平台做开发者资质认证的就不要浪费时间了,没认证无法获取unionId,认证费用300元/年,emmmm.... 微信授权登录流程 第一步:wx.login获取 用户临时登录凭证code 第二步:wx.getUserInfo获取加密过的数据encryptedData和解密参数iv 第三步:把步骤一、二中的code、encryptedData、iv传到开发者自己服务端 第三步:服务端获取到code、encryptedData、iv之后用get方法请求如下微信接口 https://api.weixin.qq.com/s...