两个单纯的仿新浪网影片的QQ小流程,给我们撷取呵呵讲义。

近不该写学术论文,想鼓捣点新小东西吧,边看非官方文件格式,花了3天天数写了两个单纯的仿新浪网影片的QQ小流程,给我们撷取呵呵讲义吧。

源代码&设计图

源代码点选这儿,热烈欢迎star

运转方式:

浏览QQweb合作开发人员辅助工具增建工程项目,工程项目产品目录为标识符放置产品目录点选合作开发人员辅助工具中的校对方可在工具包里看见

设计图如下表所示

QQ小流程示例–仿新浪网影片插图
QQ小流程示例–仿新浪网影片插图1
QQ小流程示例–仿新浪网影片插图2
QQ小流程示例–仿新浪网影片插图3

合作开发自然环境与工程项目概要

QQ提供更多了两个QQ合作开发人员辅助工具,能顺利完成小流程的 API 和网页的合作开发增容、标识符查阅和撰稿、小流程自动更新和正式发布等机能。浏览门牌号浏览后,关上该辅助工具,优先选择标识符产品目录和提出申请的AppID,键入quickStart快捷键,这种会建立两个此基础网页。

QQ小流程示例–仿新浪网影片插图4

刚好在写标识符的隔天,QQ合作开发人员辅助工具崭新更新,比原本好些了,原本的console增容介面与撰稿标识符无此同一网页,极为麻烦事,那时像平常后端增容那样,增容介面与标识符撰稿网页在同一介面,方便快捷多了。

QQ小流程示例–仿新浪网影片插图5

工程项目标识符结构

QQ小流程示例–仿新浪网影片插图6

这儿说呵呵,在增建产品目录后,能优先选择添加page,js,wxml,wxss,json文件,如果直接添加page文件的话,会直接在该产品目录下生成与产品目录相同名字的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是网页结构文件。

新浪网影片API

【获取正在上映影片】https://api.douban.com/v2/movie/in_theaters【获取新浪网TOP250影片】https://api.douban.com/v2/movie/top250【 获取即将上映影片】https://api.douban.com/v2/movie/coming_soon【获取具体某一影片信息】https://api.douban.com/v2/movie/subject/:id详细数据情况可看https://developers.douban.com/wiki/?title=movie_v2

其实前三个API返回的数据都是一致的,只是返回的影片类型数据不那样而已,所以在list网页,我们只要传入不同的类型方可。在影片列表页和首页,都有展示影片的此基础信息(海报,名字,评分),所以能把这个部分拿出来做两个模板公用。大体的思路是这种,比较单纯。

配置小流程窗口和导航栏

在根产品目录下的app.json文件中配置小流程的窗口样式和导航栏

QQ小流程示例–仿新浪网影片插图7

属性信息如图,来自官网

QQ小流程示例–仿新浪网影片插图8QQ小流程示例–仿新浪网影片插图9

点选上方的校对,能看见效果

QQ小流程示例–仿新浪网影片插图10

我们在增容具体某两个网页的时候,能添加面板上方中间的添加校对模式,填写相关参数,这种不用从首页进去增容了。

QQ小流程示例–仿新浪网影片插图11

具体标识符编写

这儿只讲呵呵首页标识符的情况,其他网页用到的属性基本雷同。这儿不介绍小流程的使用语法,请先在官网上浏览个大概

wx.showLoading()

在开始进入网页时,还没加载完数据时,我们想要有两个loading效果,可直接使用小流程的apiwx.showLoading(OBJECT)显示 loading 提示框, 需主动调用 wx.hideLoading 才能关闭提示框

onLoad:function(){wx.showLoading({title:全力加载中…,})}

加载完,需要关闭时,只需要调用方可wx.hideLoading();onLoad 表示监听网页加载

wx.request()

请求数据调用wx.request();详细属性介绍点选这儿

因为请求影片列表在list和index网页都需要用到,所以我在app.js作为两个全局的方式来写

getFilminfo:function(pageType,start,count,cb){//影片列表类型,开始数据下标,请求总数,callback函数varthat=this;wx.request({url:that.globalData.basicUrl+“/”+pageType+?start=+start+&count=+count,// url:url,header:{“Content-Type”:“json”,},success:function(res){cb(res);}})},globalData:{userInfo:null,basicUrl:“https://api.douban.com/v2/movie”,pageTypelist:{“coming_soon”:“即将上映”,“in_theaters”:“正在热映”,“top250”:“TOP250影片”}}

然而,在调用接口的时候发现了这种的错误

QQ小流程示例–仿新浪网影片插图12

原因是我在合作开发配置里,没有新浪网api的域名添加到request合法域名里,所以只要在配置里加上需要的方可

QQ小流程示例–仿新浪网影片插图13QQ小流程示例–仿新浪网影片插图14

所以在index.js中,调用这个全局方式如下表所示:

//获取应用示例varapp=getApp()
Page({data:{motto:Hello World,userInfo:{},films:[{},{},{}]},onLoad:function(){wx.showLoading({title:全力加载中…,})console.log(onLoad)varthat=this;vartypelist=[“in_theaters”,“coming_soon”,“top250”];vartitlelist=[“正在热映”,“即将上映”,“TOP250影片”];for(leti=0;i<typelist.length;i++){vartype=typelist[i];app.getFilminfo(type,0,8,function(res){wx.hideLoading();vardata=res.data;data.subjects.map(function(item){if(item.title.length>8){item.title=item.title.slice(0,7)+“…”;}if(item.rating.average>=9.5){item.rating.star=“star10”;}else{item.rating.star=“star”+Math.round(item.rating.average);}console.log(item.rating.star);})that.data.films[i]={title:titlelist[i],data:data.subjects,type:typelist[i]};that.setData({films:that.data.films});console.log(that.data.films);})}}})

我们通过更多按钮跳转到对应的影片列表list网页,所以需要绑定事件

在index.wxml中,

更多>

bindtap是对应是事件名字,同时我们需要设置data-type属性,属性值即是影片列表类型在index.js中

toView:function(e){vartemp=e.currentTarget.dataset;//获取当前组件上由data-开头的自定义属性组成的集合wx.navigateTo({url:../list/list?type=+temp.type//temp.type即是当时data-type属性值})},

wx.navigateTo()是路由跳转的api

模板

因为影片的此基础信息展示在多个网页中都有用到,我们单独提出来写个影片自动更新模板

<templatename=“movieThumb”><viewwx:key=“id”class=“film-item”datatitle=“{{title}}”dataid=“{{id}}”bindtap=“detail”><imagesrc=“{{images.medium}}”alt=“{{alt}}”class=“film-image”></image><textclass=“film-title”>{{title}}</text><viewclass=“film-rate”wx:if=“{{rating.average!=0}}”><viewclass=“film-star {{rating.star}}”></view><text>{{rating.average}}</text></view><textclass=“film-rate”wx:else>暂无评分</text></view></template>

模板名字设置为movieThumb

例如在首页中有用到该模块,那在index.wxml中如下表所示调用方可

<importsrc=“../template/movieThumb.wxml”/><scrollviewscrollx=“true”class=“filmlist”><templateis=“movieThumb”wx:foritems=“{{filminfo.data}}”wx:foritem=“film”wx:key=“id”data=“{{…film}}”></template></scroll-view>

先写到这儿吧,其他标识符看github上的方可,具体还是要多看文件格式,写个工程项目练练,很容易上手啦!

原作者: syean 来自:syean个人博客原文链接:QQ小流程示例–仿新浪网影片

作者 nasiapp

在线客服
官方客服
我们将24小时内回复。
12:01
您好,有任何疑问请与我们联系!

选择聊天工具: