微信小程序开发实战教程课件

第7章调用API开发新闻小程序微信小程序开发实战教程（PHP+Laravel+MySQL）（微课版）学习目标熟悉swiper轮播图组件熟悉调用API获取数据的方法理解页面之间参数传递的用法和意义对后台有初步的认识熟悉轮播图理解如何按需加载更多数据1234567.1创建新闻小程序项目【演练】新建项目为项目准备好一个空的文件夹，如编者在桌面上新建了一个文件夹“news”。运行微信开发者工具，新建项目。在“目录”下拉列表中选择“news”文件夹，在“AppID”文本框中输入开发者的“AppID”，为练习方便，单击“测试号”链接即可，单击“新建”按钮。7.1创建新闻小程序项目复制本书配套资源中的“images”文件夹到项目根目录下，准备好项目所需要的一些图片资源。本项目包括两个页面：“list”页面用于展示新闻列表、“info”页面用于展示某条新闻的详情。下面先准备好这两个页面。右键单击“pages”文件夹，在弹出的快捷菜单中选择“新建文件夹”选项，输入文件夹名称“list”，按Enter键。7.1创建新闻小程序项目如图所示，右键单击“list”，在弹出的快捷菜单中选择“新建Page”选项，输入页面名称“list”，自动生成4个文件。7.1创建新闻小程序项目右键单击“pages”，在弹出的快捷菜单中选择“新建文件夹”选项，输入文件夹名称“info”，按Enter键。右键单击“info”，在弹出的快捷菜单中选择“新建Page”选项，输入页面名称“info”，自动生成4个文件。修改app.json文件。7.1创建新闻小程序项目右键单击“index”文件夹，在弹出的快捷菜单中选择“删除”选项，单击“确定”按钮。右键单击“logs”文件夹，在弹出的快捷菜单中选择“删除”选项，单击“确定”按钮。运行结果如图所示，可以看到“list”为首页。7.2新闻列表设计【演练】设计新闻小程序的新闻列表页面如图所示，单击“详情”按钮，选中“本地设置”标签页，注意图中鼠标指针所在的位置，选中“不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书”复选框。7.2新闻列表设计<view><swiperindicator-dots='{{true}}'autoplay='{{true}}'style='height:180px;'><blockwx:for='{{imgUrls}}'wx:key='index'><swiper-item><imagesrc='{{item}}'class='silde-image'style='width:100%;height:100%;'></image></swiper-item></block></swiper></view><view><navigatorurl="../info/info?artid={{item.article_id}}"wx:for="{{news}}"wx:key='index'>修改并保存list.wxml文件，代码如下。7.2新闻列表设计<viewstyle="display:flex;margin:5px"><viewstyle="width:100px;height:auto"><imagestyle="height:100%;width:100%"src="{{'http://static.hcoder.net/'+item.article_img_url}}"></image></view><viewstyle="flex:1;margin:5px">{{item.article_title}}</view></view></navigator></view>7.2新闻列表设计var_selfPage({/***页面的初始数据*/data:{imgUrls:["/images/1.jpg","/images/2.jpg","/images/3.jpg",],news:[]},修改并保存list.js文件，代码如下。7.2新闻列表设计/***生命周期函数——监听页面加载*/onLoad:function(options){_self=thisthis.getList()},getList:function(){wx.request({url:'/api/index.php?token=5a7d3fec77613-100001&c=article&m=articleList',methods:'GET',header:{"Content-Type":"json"},success:function(res){7.2新闻列表设计_self.setData({news:res.data.data})}})},/***生命周期函数——监听页面初次渲染完成*/onReady:function(){},/***生命周期函数——监听页面显示*/onShow:function(){7.2新闻列表设计/***生命周期函数——监听页面隐藏*/onHide:function(){},/***生命周期函数——监听页面卸载*/onUnload:function(){7.2新闻列表设计},/***页面相关事件处理函数——监听用户下拉动作*/onPullDownRefresh:function(){},/***页面上拉触底事件的处理函数*/onReachBottom:function(){7.2新闻列表设计

},/***用户点击右上角分享*/onShareAppMessage:function(){}})7.2新闻列表设计首页运行结果如图所示。注意观察，头部为轮播图，其余为新闻列表。7.3新闻详情页面设计【演练】设计新闻详情页面varartid=0,_selfPage({/***页面的初始数据*/data:{artInfo:[]

},7.3新闻详情页面设计/***生命周期函数——监听页面加载*/onLoad:function(options){_self=thisartid=options.artidthis.getInfo()},getInfo:function(){wx.request({url:'/api/index.php?token=5a7d3fec77613-100001&c=article&m=articleInfoForWx&artid='+artid,success:function(res){7.3新闻详情页面设计wx.setNavigationBarTitle({title:res.data.data.article_title})_self.setData({artInfo:res.data.data});}});},/**7.3新闻详情页面设计*生命周期函数——监听页面初次渲染完成*/onReady:function(){},/***生命周期函数——监听页面显示*/onShow:function(){7.3新闻详情页面设计},/***生命周期函数——监听页面隐藏*/onHide:function(){},/***生命周期函数——监听页面卸载*/7.3新闻详情页面设计onUnload:function(){},/***页面相关事件处理函数——监听用户下拉动作*/onPullDownRefresh:function(){},/**7.3新闻详情页面设计*页面上拉触底事件的处理函数*/