微信小程序开发中常用的功能代码分享
2017-03-12 21:37
645 查看
微信小程序开发中常用的功能代码分享,总结出来了常用的代码片段,供大家参考。 作者:lu521。本文来自公众号:公众开发平台 一、小程序获取用户信息userInfo 第一步:在js上,引入app页面 例如:var app = getApp(); 第二步:onload方法中,注入参数options,调用getUserInfo方法,绑定userInfo 例如: onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 var that = this; app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) } 第三步:绑定到wxml页面上 例如: <view class="user"> <image src="../../images/ios7-personadd-outline.png" style="width:50rpx;height:50rpx;"></image> <input type="text" value="{{userInfo.nickName}}" /> </view> 注:用户的常用信息: 昵称:nickName 性别:gender(性别 0:未知、1:男、2:女) 头像:avatarUrl 语言:language 地址:city 国家:country 区/县:province 二、提交表单内容至服务器 1.form表单中 给form绑定bindsubmit事件 例如:<form bindsubmit="formSubmit"> 在每一个表单上添加一个name属性 例如:<textarea placeholder="留言内容(必填)" name="textarea"/> 2.在bindsubmit绑定的事件里 注入event参数 例如: formSubmit:function(event){} 获取输入的数据 例如:var _body = e.detail.value.textarea; 上传数据 例如:http.httpPost("/v2/qa.create",{ appid:config.APPID, body: _body },function(res){ console.log('ok') }) 三、小程序改变图片(例如:收藏中改变图片样式) (1)在data上绑定数据和初始值(放置的所有数据) img:["../../images/ios7-heart-outline.png","../../images/ios7-heart.png"], num:0 (注:"../../images/ios7-heart-outline.png"为自动加载的图片,"../../images/ios7-heart.png"]为替换过的图片,数据同理) (2)放置数据变量 <image src="{{img[num]}}" style="width:50rpx;height:50rpx;"></image>收藏 (3)放置绑定事件 bindtap="buyCount" (4)添加事件方法 buyCount:function(num){ num=1; console.log(num); var that = this; (注:在page前面需要放置var app = getApp()语句) app.getUserInfo(function(){ //更新数据 that.setData({ num:num }) console.log(num); }) } 补充一种更简单的方法 (1)在data上绑定图片 例如:img:"../images/ios7-heart-outline.png" (2)在wxml上放置图片 例如: <image src="{{img}}" style="width:50rpx;height:50rpx;"></image>收藏 (3)在点击事件里切换图片 例如:addCollection:function(){ var that = this; that.setData({ img: "../images/ios7-heart.png" }); } |
相关文章推荐
- [微信小程序]转发(分享)和打电话功能,完整代码附效果图
- 详解微信小程序开发―你期待的分享功能来了,微信小程序序新增5大功能
- 微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
- 微信小程序支付功能 php后台对接完整代码分享
- 微信小程序开发常用技巧(9)——使用模板文件方便公共代码开发
- 微信小程序开发关于分享功能中怎么定义同一个页面中不同的按钮触发不同的分享内容,或者右上角的分享和页面中分享
- 微信小程序一些常用代码(1)——tabar、页面跳转、分享、选项卡、radio
- 微信分享功能开发代码整理
- 使用Visual Studio(VS)开发Qt程序代码提示功能的实现(转)
- 微信公众平台开发应用(天气预报、股票查询、手机归属地查询、在线听音乐、翻译、成绩查询等功能)代码分享如下
- 微信开发 分享朋友圈或好友代码
- C#开发之微信小程序发送模板消息功能
- Android开发_微信分享功能
- 微信快速开发框架(九)-- V3.0发布,代码已更新至Github 新增微店功能
- 【iOS】iOS开发中常用的几个功能代码
- WP常用插件程序代码分享