微信小程序--ajax服务器交互及页面渲染
网上找的帖子大多是直接在onload中请求数据。而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染。所以搞了挺久的,在此记录一下。
请求是按照微信官方给出的,wx.request
在这里,我的逻辑是:点击按钮---》根据绑定的事情注册函数--》发起微信请求--》判断是否返回数据,成功返回数据则显示请求成功。--》返回数据到前端页面进行渲染
废话不多说,直接上代码:
一、前端页面代码:
<view class="container2">
<view class="panel">
<label class="title">请输入查询内容</label>
<input class="inputarea"/>
<button bindtap='onRequest' type="primary" class="searBtn">查询</button>
</view>
<scroll-view class="article-list" style="height:500px" scroll-y="true" bindscrolltolower="nextPage">
<block wx:for="{{list}}">
<view class="list-item" index="{{index}}">
<view class="title">
<view class="title-name">{{item.title}}</view>
</view>
</view>
</block>
</scroll-view>>
解释:
(1)此处的button绑定onRequest事件,当点击button时候,触发该事件。
(2)下面的view 主要是渲染request请求之后的数据,利用wx:for 来进行循环输出.
(3)需要注意,我们此处用的是带滚动效果的:scroll-view,同时scroll-y="true" 代表是竖向滚动。
二、JS代码:
Page({
data: {
motto: '你懂我懂不懂',
list:[]
},
onload:function()
{
this.onRequest();
},
onRequest:function()
{
var that = this;
wx.request({
url: 'https://api.douban.com/v2/movie/top250',
method:"GET",
header: {
'Content-Type': 'json'
},
success: function (res) {
console.log(res.data.subjects);
var date = res.data.subjects;
that.setData({
list: date
})
},
fail: function () {
console.log("接口调用失败");
}
})
},
nextPage:function()
{
console.log("下拉触发该函数");
},
//事件处理函数
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
},
})
解释:
(1)list是我们等下要输入的内容,因此需要在data中体检申明
(2)onload函数在此处很重要。页面加载完成之后,调用了onrequest()函数,这样是为了渲染数据。重置要求
必须使用that.setData,这里的that需要用:var that = this来申明。
(3)当点击Button按钮的时候,onRequest函数出发。此时请求url,并返回数据。当返回的数据存在时,走success方法。
(4)此时,赋值list :date,相当于给list赋值,可用于wxml页面进行数据渲染。
(5)nextPage即为页面滚动函数。当下拉触底时,触发该函数
(6)此处的url为豆瓣的一个查看电影的url,可以直接借用的。
效果图:
三、碰到的问题:
1、报错:微信小程序开发-网络请求报Invalid
request 400错误:
原因:最新版的参数和以前的不同,把数据格式换一换。
// 'content-type': 'application/json'
'Content-Type': 'json'
2、请求中的get,post必须要大写
3、如果出现找不到页面的情况,可能是app.json中,你的引入页面顺序问题。有的页面的js没有page()函
数,造成页面未定义
end
虽然忙活到12点,但是感觉受益匪浅。苦逼的程序猿,也只有获取知识时候的那点快感聊以自慰了。
原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=2924
微信小程序--ajax服务器交互及页面渲染的更多相关文章
- 微信小程序答题,怎么设计页面渲染,答完一题,跳到下一题
想要的效果 1.第一页只显示第一道题的内容,如图红框2.答题后,点击下一题,内容显示第二道题的内容 代码 answer.wxml <!--pages/answer/answer.wxml--&g ...
- 鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用
注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件 过程:1.导入鸿蒙的网络请求模块fetch 2.发起对服务器的请求(在这过程 ...
- 微信小程序:JS 交互逻辑
微信小程序:JS 交互逻辑 一.JS 交互逻辑 一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击.获取用户的位置等等.在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作. ...
- 微信小程序把玩(五)页面生命周期
原文:微信小程序把玩(五)页面生命周期 这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写. 以下是官网给出的生命周期函数方法和状态图 上面的生周期函数图对于做Android 或者IOS ...
- 微信小程序与Html交互
微信小程序与H5页面交互 https://www.jianshu.com/p/22e951d83841
- 微信小程序开发06-一个业务页面的完成
前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...
- 微信小程序 从含有tabbar的页面跳转到不含有tabbar的页面
如何离开含有tabbar的页面 在微信小程序开发过程中,我们会碰到从某页跳转到一个含有tabbar的页面的需求, 用 wx.navigateTo({url: '...',}) 不起作用,需要使用 w ...
- 微信小程序开发--路由切换,页面重定向
这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1 wx.navigat ...
- 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案
场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...
随机推荐
- Java之面向对象概述,类,构造方法,static,主方法,对象
一.面向对象概述 面向过程 "面向过程"(Procedure Oriented)是一种以过程为中心的编程思想.这些都是以什么正在发生为主要目标进行编程,不同于面向对象的是谁在受影响 ...
- lombok的简单介绍和使用方法
这是上周在群里发现有人推荐lombok,他说是神器,当时就引起了我的好奇,然后下班回来我就看了看官网介绍(菜鸟英语水平),这就是难点了,然后就是大概了解了一下,就在网上查了查相关资料,周末的时候自己试 ...
- 解决无线网络连接出现黄色感叹号---win10
今天使用公司的电脑,这个电脑是另一位同事用过的,然后到我这里就连不上网了.然后把自己解决的方法记录一下: 开始运行输入以下命令来重置IP. 打开运行输入:cmd 在命令窗口中输入:ipconfig / ...
- tensorflow softmax应用
---恢复内容开始--- 1.softmax函数 2.tensorflow实现例子 #!/usr/bin/env python # -*- coding: utf-8 -*- import tenso ...
- (转)Linux服务器安装配置tomcat
这里首先说明下,Linux下的Tomcat没有32位和64位的区分. tomcat是分windows版本与linux版本的,windows版本一般以exe或者zip格式:linux版本一般以tar.g ...
- LeetCode-Triangle[dp]
Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...
- 懵懂oracle之存储过程3--JOB详解
在前面学习了存储过程的开发.调试之后,我们现在就需要来使用存储过程了.简单的使用,像上篇<懵懂oracle之存储过程2>中提到的存储过程调用,我们可以将写好的存储过程在另一个PL/SQL块 ...
- session的用法
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Promise和异步编程
前面的话 JS有很多强大的功能,其中一个是它可以轻松地搞定异步编程.作为一门为Web而生的语言,它从一开始就需要能够响应异步的用户交互,如点击和按键操作等.Node.js用回调函数代替了事件,使异步编 ...
- 进阶篇之纯css+字体实现五角星(半颗星)评分
1.前言 之前写了一篇实现五角星打分效果的demo.这个demo用来实现打分效果绰绰有余,那么有时候我们在统计评分的时候,就会有半颗星或者1/3颗星星这样的那要如何实现呢?来来来,纯字体+css实现! ...