Blogger Information
Blog 3
fans 0
comment 0
visits 14740
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
基于PHP的微信小程序的开发流程-前后台数据交互(2)
宝龙
Original
2373 people have browsed it

微信小程序的周期函数

生命周期是指一个小程序从创建到销毁的一系列过程,这一过程中使用的函数就是周期函数,下面给大家介绍几个在开发中最常用的几个周期函数。

Page(Object object)

注册小程序中的一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。

onLoad() 页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
onShow()页面显示/切入前台时触发。
onReady()页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

其中,在第一次进入打开小程序页面之后,会依次执行onLoad,onReady和onShow方法

onHide() 页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面,小程序切入后台等。

前后台切换会分别执行onHide和onShow方法,

前台/后台状态

小程序启动后,界面被展示给用户,此时小程序处于前台状态。
当用户点击右上角胶囊按钮关闭小程序,或者按了设备 Home 键离开微信时,小程序并没有完全终止运行,而是进入了后台状态,小程序还可以运行一小段时间。
当用户再次进入微信或再次打开小程序,小程序又会从后台进入前台。但如果用户很久没有再进入小程序,或者系统资源紧张,小程序可能被销毁,即完全终止运行。

onUnload() 页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。

实践

1.打开index.wxml 创建按钮,绑定点击事件

<view>
<button type="warn" size="mini" bindtap="clickevent" data-name="1001">第一个接口</button>
</view>

bindtap 普通点击事件,绑定方法的clickevent data-name=”1001” 传递参数name为1001。

2.在index.js中书写绑定的方法;
(1).在page.data中定义:
data:[] //空数组/对象,存储后台返回的数据
boolean:false //是否显示返回的数据, ture为显示数据 ,false不显示

(2).clickevent点击事件方法,向后台发送get请求

  1. clickevent: function (e) {
  2. var that = this;
  3. var name = e.currentTarget.dataset.name;
  4. console.log(name);
  5. console.log('第一个接口')
  6. //发送get请求
  7. wx.request({
  8. url: 'http://test.cn/index.php', //仅为示例,并非真实的接口地址
  9. data: { name : name },//传递的参数
  10. header: {
  11. 'content-type': 'application/json' // 默认值
  12. },
  13. success: function(res) {
  14. console.log(res.data);
  15. //将得到的数据展示在页面中,小程序使用setdata将数据从逻辑层转化到视图层,即页面渲染
  16. that.setData({
  17. boolean:true,
  18. data:res.data.data
  19. })
  20. }
  21. })
  22. }

发送post请求需要修改:

  1. method:'post',
  2. header:{'Content-Type':'application/x-www-form-urlencoded'},


3.在页面中展示后台返回的数据,打开index.wxml

  1. <!-- boolean=true 显示数据 -->
  2. <block wx:if="{{boolean==true}}">
  3. <!-- 循环数组 -->
  4. <block wx:for="{{data}}">
  5. <view class="bg_black">{{item}}</view>
  6. </block>
  7. </block>
  8. <!-- boolean=true 隐藏数据 -->
  9. <block wx:elif="{{boolean==false}}">
  10. <view class='bg_red'>无数据</view>
  11. </block>


4.后台代码书写

  1. $get = $_GET['name'];
  2. $info = [$get,'苹果','香蕉','西瓜'];
  3. $data = ['code'=>200,'data'=>$info,'info'=>'数据查找成功'];
  4. echo json_encode($data);
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!