需求：留言可以点赞，点过赞之后图标变化，没人只能点赞一次，留言可以在留言 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...