微信小程序底部选项卡开发实例

微信小程序的开发包括顶部导航栏和底部标签页。关于小程序顶部导航栏的相关信息之前已经介绍过了，所以就来说说微信小程序底部标签的开发例子。

在网上看了很多关于小程序tab的教程，发现都很乱。用法是titlepagertabstrip和viewpaper。然而，titlepagertabstrip有一个很大的缺陷。tab中的内容刚输入后不可用，所以需要滑动一次才能加载。而且滑动时，拉环内的内容物位置不固定，滑动时会出现空白，非常不美观。虽然还有其他的补救办法，但是很麻烦，所以我用自己的方式实现了一个。功能不错，很简单。

直接或滑动界面转到相应的小程序页面。

效果图：

原则是使用三个按钮和可视纸，放弃titlepagertabstrip。

通俗地说，viewpaper就是一个装页面的容器。如上所示，我有三个不同的界面，因为我添加了三个视图。然后把这个viewpaper添加到主界面的布局中。

这样，主界面上有三个按钮，按钮下面有一个viewpaper，viewpaper中有三个视图。每次滑动或按钮，都会跳转到相应的视图。

也就是说，我们看到的其实是主界面，按钮一直在。我们只是不断改变容器视图纸内的视图。

主界面布局代码：

xmlns : tools=' http://schemas . android.com/tools '

android : layout _ width=' match _ parent '

android : layout _ height=' match _ parent '

tools:context='。main activity '；//在此添加三个按钮

//这里有一个可视纸容器

android:id='@ id/viewpager '

android : layout _ width=' wrap _ content '

android : layout _ height=' wrap _ content '；

如何做到这一点，按相应的按钮跳转到viewpaper中相应的视图？很简单，只需为按钮设置监视器，然后调用viewpaper的setcurrentitem函数。

对于相应的页面，我们的按钮也应该有相应的变化。如上图，我们按钮里的英文变成了。在这种情况下，只需在viewpaper的侦听器中重载onpageselected函数。

当选择每个页面时，调用此函数。在此功能中，判断哪个页面是当前页面，然后对按钮进行相应的修改。

oncreate的代码

//设置视图纸

viewpager pager=null

array list viewcontainter=new array list；

@覆盖

受保护的void on create(bundle savedinstancestate){

super . oncreate(savedinstancestate)；

setcontent view(r . layout . activity _ add)；

//实例化viewpaper

pager=(view pager)this . findviewbyid(r . id . view pager 3)；

//设置按钮跳转到相应的viewpaper页面

按钮1。setonclicklistener (newview。onclicklistener {

@覆盖

public void onclick(view v) {

//跳转到第一页

pager . setcurrentitem(0)；

}

});

按钮2。setonclicklistener (newview。onclicklistener {

@覆盖

public void onclick(view v) {

//第二页

pager . setcurrentitem(1)；

}

});

按钮3。setonclicklistener (newview。onclicklistener {

@覆盖

public void onclick(view v) {

//第三页

pager . setcurrentitem(2)；

}

});

//设置viewpaper的内容

//view就是我们放在viewpaper里的东西。我们需要在放入之前为它设置布局

viewview1=layoutinflater。从(这个)。充气(r.layout. own layout文件1，null)；

viewview2=layoutinflater。从(这个)。充气(r.layout. own layout文件2，null)；

viewview3=layoutinflater。从(这个)。充气(r.layout. own layout文件3，null)；

//这是一个数组列表，添加了三个视图

view container . add(view 1)；

view container . add(view 2)；

view container . add(view 3)；

//设置适配器，并将代码复制到这里

pager.setadapter(新的pageradapter {

//viewpager中的组件数

@覆盖

public int getcount

返回viewcontainter.size

}

//滑动切换的时候销毁当前的组件

@覆盖

公共作废销毁项目(视图组容器，int位置，object object) {

((可视寻呼机)容器)。移除视图(viewcontainter。get(位置))；

}

//每次滑动的时候生成的组件

@覆盖

公共对象实例项目(视图组容器，int position) {

((可视寻呼机)容器)。添加视图(视图容器。get(位置))；

返回viewcontainter。get(position)；

}

@覆盖

public boolean是从对象视图(视图arg 0，对象arg1) {

返回arg0==arg1

}

@覆盖

public int getitempposition(object object){

超级返程。gettempposition(object)；

}

});

//页面变化时的监听改变按钮

寻呼机。setonpagechangeelistener(新视图页导航。onpagechangeelistener {

@覆盖

public void onpagescrolled(int i，float v，int i1) {

}

@覆盖

所选页面上的公共无效(int i){

开关(i) {

//如果是第一个页面

案例0:

按钮1 .settext('')；

按钮2 .settext(' tab 2 ')；

按钮3 .settext(' tab 3 ')；

打破；

//如果是第二个页面

案例1:

按钮1 .settext(' tab 1 ')；

按钮2 .settext('')；

按钮3 .settext(' tab 3 ')；

打破；

//如果是第三个页面

案例1:

按钮1 .settext(' tab 1 ')；

按钮2 .settext(' tab 2 ')；

按钮3 .settext('')；

打破；

}

}

@覆盖

public void onpagescrollstatechanged(int i){

}

});

}

以上就是微信小程序底部选项卡的开发实例和相关代码了，怎么样，是不是很简单呢？希望大家都能参照教程开发成功，更多相关资料请关注货源代理网小程序频道。

这里是标题开头如何实现小程序在线付款？这里是标题尾

微信比较近开放了小程序支付功能，也就是说，用户可以像使用支付宝应用一样使用小程序在线付款，那么要怎样才能使用这个功能呢？以下是小程序在线付款的开发流程和注意点：

1.开通微信支付和微商户号（教程请在微信小程序商店进行搜索)

2.获得用户的信息

首页我们需要在小程序的客户端射流研究…中获取当前用户的openid，通过调用wx.login方法可以得到用户的代码，然后开发者服务器使用登录凭证密码获取openid。

wx.login({

成功：功能(res) {

if (res.code) {

//发起网络请求

wx.request({

url : ' https://您网站/在线登录'，方法： '发布，数据： {

代码： res.code

},

成功：功能(res) {

var open id=res . data。打开id；

},

fail:函数(错误){

console.log(错误)

}

})

} else {

console.log('获取用户登录态失败!'res.errmsg)

}

}

});

var code=req。param(' code ')；

请求({

url : ' https://api。微信。qq。com/sns/jscode 2会话？appid=' appid ' secret=' secret ' js _ code=' code ' grant _ type=authorization _ code '，方法：“获取”

},函数(错误，响应，正文){

if(！err response.statusco

de==200) {

json(json。parse(body))；

}

});

3.获取预付编号和支付签名验证支付签名

这一步的过程就和服务号里的微信支付过程一样，分为客户端和服务器端

首先来看一下客户端射流研究…

在服务号里，我们是通过如下的代码来调起支付功能

函数jsapicall

{

weixinjsbridge.invoke(

' getbrandwcpayrequest '，{

appid': ' '，//公众号名称，由小程序商家传入

时间戳' : ' ',//时间戳，自1970年以来的秒数

noncestr ' : ' '，//随机串

包' : '预付款_id='，signtype':'md5 '，//微信签名方式：

paysign':'' //微信签名

},

功能(res){

weixinsbridge。日志(res . err _ msg)；

if(res . err _ msg==' get _ brand _ wcpay _ request : ok '){

"警报("支付成功！');

}else{

"警报("支付失败！');

}

}

);

}

在小程序里，我们是通过wx.requestpayment方法来调起支付功能，当然在这之前，我们先要获取预付id。

wx.request({

url : ' https://您网站/服务/getpay '，方法： '发布，数据： {

登记号码：登记号码，/*订单号*/

total_fee:total_fee，/*订单金额*/

openid:openid

},

header: {

内容类型' : '应用程序/json '

},

成功：功能(res) {

wx.requestpayment({

timestamp':timestamp，noncestr ' : noncestr，包' : ' prevable _ id=' res . data。prevable _ id，signtype': 'md5 '，paysign ' : res . data。_ paysign js，success':function(res){

控制台。日志(res)；

},

fail':function(res){

控制台。日志(' fail : ' json。stringify(res))；

}

})

},

fail:函数(错误){

console.log(错误)

}

})

那在服务器端主要要实现的是预付编号的获取和签名支付签名

var预订编号=req。param('订房号码')；

var total _ fee=req。param(' total _ fee ')；

var open id=req。param(' open id ')；

var body='小程序费用说明；

'https://api.mch.weixin.qq.com/pay/unifiedorder'；

var formdata=

请求({

url: url，方法： '发布，body: formdata

},函数(错误，响应，正文){

if(！err response.statuscode==200) {

var预付款_id=getxmlnodevalue('预付款' id '，正文。tostring(' utf-8 ')；

var tmp=预付费_ id。split('[')；

var tmp1=tmp[2].split(']')；

//签名

var _paysignjs=paysignjs(appid，mch_id，' prevable _ id=' tmp 1[0]，' md5 '，时间戳);

var o={

预付_id: tmp1[0]，_paysignjs: _paysignjs

}

res . send(o)；

}

});

下面是用到的函数

函数paysignjs(appid，noncestr，package，signtype，timestamp) {

var ret={

appid: appid，noncestr: noncestr，package:包，signtype: signtype，timestamp:时间戳

};

var string=raw 1(ret)；

string=string ' key=' key

console.log(字符串);

var crypto=require(' crypto ')；

返回crypto.createhash('md5 ').更新（字符串"，utf8 ").摘要(' hex ')；

};

函数raw1(args) {

var keys=object。key(args)；

keys=keys.sort

var new args={ }；

keys.foreach(function(key) {

new args[key]=args[key]；

});

var字符串=

for(var k in newargs) {

string=' k '=' new args[k]；

}

string=string。substr(1)；

返回字符串；

};

函数paysignjsapi(appid，attach，body，mch_id，nonce_str，notify_url，openid，out_trade_no，spbill_create_ip，total_fee，trade_type) {

var ret={

appid: appid，附件：附件，body:车身

mch_id: mch_id，nonce_str: nonce_str，notify_url: notify_url，openid: openid，out_trade_no: out_trade_no，: sp bill _ create _ ip，total_fee: total_fee，贸易类型：贸易类型

};

var string=raw(ret)；

string=string ' key=' key

var crypto=require(' crypto ')；

返回crypto.createhash('md5 ').更新（字符串"，utf8 ").摘要(' hex ')；

};

函数原始(args) {

var keys=object。key(args)；

keys=keys.sort

var new args={ }；

keys.foreach(function(key) {

new args[key . tolowercase]=args[key]；

});

var string=

for(var k in newargs) {

string=' k '=' new args[k]；

}

string=string . substr(1)；

返回字符串；

};

函数getxmlnodevalue(node_name，xml) {

var tmp=xml . split(' node _ name '；');

var _tmp=tmp[1]。split(')；

return _ tmp[0]；

}

在这简单的3个步骤中，连接小程序的微信支付功能，小程序就可以进行网上支付了。以下是效果图：

其实微信支付在小程序中的开发过程和在服务号中的开发过程一模一样。大家应该都知道如何在小程序中开发在线支付。快点用吧，你会发现比支付宝还方便。