章节展示页面及小节展示页面的动态开发

这两个页面的开发方式类似,主要有三个点想了很久:
(1)一是遍历传参数的问题,这个问题在问题的分类下有提到,我开始使用的页面跳转方法是bindtap,但是我发现我不会用它来传参数,所以改成了navigator来直接传参数
(2)二是对于数组参数的传递我在主页的章节展示上就涉及到了,但是它的标题是只有一个对象就好反而我试了很多方法都不行。主要的问题在于可以在wx:request中通过console取出我获得的对象,但是到setData这个函数中就调用不了了。所以我索性把标题也设置成了数组,只不过是只有一个对象的数组,这样的话即使是遍历也只有一个也可以满足要求
(3)三是数据库的查询语句问题,thinkjs中所采用的语句与sql语句稍微有一点不一样,但是参照thinkjs官方文档可以完成
这里以章节展示页面为例:
后台调用数据库数据:

async chapmoreAction(){
        let name=this.get("name");
        think.logger.info(name);
        //采用模糊查询的方式访问后台数据库
        let result=await this.model("entry_classi").where( {"classiName":name } ).select();
        return this.success(result);
    }

主页navigator:

	<navigator url="../chapins/chapins?chapNo={{item.chapNo}}" open-type="navigate" >

wxml核心代码:

		<block wx:for="{{list}}">
			<view class="weui-cells">
				<navigator url="../chapmoreins/chapmoreins?chapName={{item.name}}" open-type="navigate">
					<view class="weui-cell weui-cell_active weui-cell_access">
						<view class="weui-cell__bd">
							<text style="vertical-align: middle;">{{item.name}}</text>
						</view>
						<view class="weui-cell__ft" bindtap="showIns"></view>
					</view>
				</navigator>
			</view>
		</block>

js中核心代码:

Page({
  data: {
    list: [],
    cName:[]
  },
  //页面加载的时候自动调用
   onLoad: function (options) {
    console.info(options.chapNo)
    //发送网络请求,获取数据
    var that = this
     //调用方法获取电影列表
      wx.request({
          url: 'http://127.0.0.1:8360/home/chap/chap',
          data:{
              name: options.chapNo
          },
          success: function (res) {
              //获取相应结果
              var result = res.data.data;
              console.info(result)
              //声明数组列表
              var chapins_list = [];
              var chapName=[];
              chapName.push(result[1].chapName);
              
              for (var i = 0; i < result.length; i++) {
               
                  //获取页面需要看到的词条对象
                  chapins_list.push({
                     
                      name: result[i].insName
                  })
              }
              //储存于数据仓库
              that.setData({
                  cName: chapName,
                  list: chapins_list
              });
          }

})

}

猜你喜欢

转载自blog.csdn.net/weixin_44051236/article/details/106309441