微信小程序开发中常用的功能代码分享

    xiaoxiao2021-03-25  107

    微信小程序开发中常用的功能代码分享,总结出来了常用的代码片段,供大家参考。 作者: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"

                     });

    }

    转载请注明原文地址: https://ju.6miu.com/read-37172.html

    最新回复(0)