折腾:
【未解决】微信小程序开发工具中去画界面实现首页布局
期间,先要在小程序中:

显示出列表效果:

对于列表,倒是不难:
小程序 list列表
小程序 list
然后去试试:
【总结】
index.js
//index.js
const util = require('../../utils/util.js')
//获取应用实例
const app = getApp()
Page({
data: {
curInputValue: "",
searchBookList: [],
motto: '绘本查询精灵',
。。。
},
//事件处理函数
inputCallback: function (e) {
console.log("inputCallback: e=%o", e)
this.setData({
curInputValue: e.detail.value
})
console.log("curInputValue=%s", this.data.curInputValue)
},
inputConfirmCallback: function (e) {
console.log("inputConfirmCallback: e=%o", e)
this.submitQuery()
},
searchSuccessCallback: function(response){
console.log("response=%o", response)
var respData = response.data
console.log("respData=%o", respData)
if (respData) {
if (respData.code === 200) {
var bookDictList = respData.data
console.log("bookDictList=%o", bookDictList)
console.log("this=%o", this)
this.setData({
searchBookList: bookDictList
})
}
}
},
submitQuery: function () {
console.log("submitQuery")
console.log("before submit: curInputValue=%s", this.data.curInputValue)
var trimmedInput = util.trim(this.data.curInputValue)
console.log("trimmedInput=%s", trimmedInput)
var encodedInputQuery = encodeURIComponent(trimmedInput)
console.log("encodedInputQuery=%s", encodedInputQuery)
var urlPrefix = app.globalData.HostUrl + "/storybook?q="
console.log("urlPrefix=%s", urlPrefix)
var queryUrl = urlPrefix + encodedInputQuery
console.log("queryUrl=%s", queryUrl)
wx.request({
url: queryUrl,
method: "GET",
header: {
// 'content-type': 'application/json'
// "Content-Type": "json"
'content-type': 'application/text'
},
success: this.searchSuccessCallback
})
},
。。。
})index.wxml
<view wx:for="{{searchBookList}}" wx:for-index="bookIdx" wx:for-item="curBookItem">
{{bookIdx}}: {{curBookItem.title}}
</view>然后效果是:
点击查询,返回数据,设置数据,list显示出来了:

虽然很难看,但是数据可以显示了。
然后再去:
转载请注明:在路上 » 【已解决】小程序中把返回数据显示到列表中