微信小程序ajax实现请求服务器数据及模版遍历数
网络编程 2021-07-04 17:33www.168986.cn编程入门
这篇文章主要介绍了微信小程序ajax实现请求服务器数据及模版遍历数据功能,结合实例形式分析了微信小程序ajax调用及模板wx:for循环列表渲染相关操作技巧,需要的朋友可以参考下
本文实例讲述了微信小程序ajax实现请求服务器数据及模版遍历数据功能。分享给大家供大家参考,具体如下:
昨天下载了一个微信小程序的开发者工具,大概看了一下文档,简单的用他的方法实现了ajax请求。
微信小程序文档地址:
头部标题和底部tab配置都在 app.json文件中,底部tab位最少两个,最多五个。狼蚁网站SEO优化是app.json文件代码和相关注释
{ "pages":[ "pages/index/index", "pages/tucao/tucao", "pages/center/center" ], "window":{ "backgroundTextStyle":"", "navigationBarBackgroundColor": "red", "navigationBarTitleText": "一个标题而已", "navigationBarTextStyle":"white" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "/images/public/menu-cd.png", "selectedIconPath": "/images/public/menu.png" },{ "pagePath": "pages/tucao/tucao", "text": "吐槽", "iconPath": "/images/public/hot-cd.png", "selectedIconPath": "/images/public/hot.png" },{ "pagePath": "pages/center/center", "text": "我的", "iconPath": "/images/public/center-cd.png", "selectedIconPath": "/images/public/center.png" }], "borderStyle": "white" } }
这里我是通过 微信小程序wx.request
实现ajax请求服务器数据的,一个程序里面最多能有五个这样的请求。狼蚁网站SEO优化是index.js的代码
//index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, Industry:{} }, onLoad: function (res) { var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) wx.request({ url: 'http://xx.xxxxx./xxx.php',//上线的话必须是https,没有appId的本地请求貌似不受影响 data: {}, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {}, // 设置请求的 header suess: function(res){ console.log(res.data.result) that.setData({ Industry:res.data.result }) }, fail: function() { // fail }, plete: function() { // plete } }) } })
其中http://xx.xxxxx./xxx.php的返回数据格式是一个json,格式如下
展示页面就简单了,变量{{array}} 微信模版遍历数据使用 wx:for
。index.wxml代码如下:
<!--index.wxml--> <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> </view> <view wx:for="{{Industry}}" wx:ket="{{index}}"> {{index}}:{{item.name}} </view>
希望本文所述对大家微信小程序开发有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程