技术交流QQ群:170933152
今天做项目
小程序开发必备基础如何独立开发一个项目豆瓣电影需要的基础:HTML+CSSjavaScript网络先理解需求-->了解项目流程,项目交互,需要知道后端的api接口-->写Dev 联调页面(这个过程指的是开发)-->测试-->上线-->迭代升级好,咱们看看咱们要做的小程序:豆瓣电影 进入首页显示loading加载数据,然后加载数据后,显示电影列表,然后刷新的时候,下面显示玩命加载中.点击具体的一个进去显示电影的详情.-----------------------看看功能:列表加载Loading加载下一页详情页appid:wx90149e6ae3c61a8c这里咱们没有appid创建项目:doubanfilm首页:home即将上映:comming列表页面:详情页面:detail下面有两个按钮,正在热映和即将上映---------------好,这里咱们配置一下,下面的两个按钮可以去查帮助文档:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html"tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, ------------------- app.json中:添加配置: { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" },"tabBar": { "list": [{ "pagePath": "pages/home/home", "iconPath":"image/ing.png",//2.默认的图片 "text": "正在热映", "selectedIconPath":"image/ing.png"//1.这里选择的时候显示的图片 }, { "pagePath": "pages/comming/comming", "text": "即将上映" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }}---------------------------tabBarnetworkTimeout//3.这个部分是从代码帮助文档copy过来的.---------------------------------------看一下,咱们配置后的app.json,记得把image这个图片资源文件copy到项目目录中.app.json:{ "pages":[ //1.正在热映和即将上映页面配置好. // "pages/home/home", "pages/comming/comming", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, //2.这里写好,然后看看效果"tabBar": { "list": [{ "pagePath": "pages/home/home", "iconPath":"image/ing.png", "text": "正在热映", "selectedIconPath":"image/ing-active.png" }, { "pagePath": "pages/comming/comming", "text": "即将上映", "selectedIconPath":"image/coming-active.png", "iconPath":"image/coming.png" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }}-------------------------------好,这样底部导航做好了,咱们看看,内容:这里需要使用api了组件：https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=201715API：1）热映https://api.douban.com/v2/movie/in_theaters?start=0&count=202）热映详情页-detailhttps://api.douban.com/v2/movie/subject/258944313）即将上映https://api.douban.com/v2/movie/coming_soon?start=0&count=204）detailhttps://api.douban.com/v2/movie/subject/10484117好,这里的这个api需要配置一下,在微信小程序的,开发者后台要配置一下服务器的域名:request合法域名:api.douban.com这样就可以了.好,咱们看看如何调用接口:咱们通过一个utils文件夹中写一个api.js对吧这里咱们用PRomise来调用api.这个promise大家不明白去查查这里,先用:api.js咱们这样写://这里定义通用的部分//比如://1）热映//https://api.douban.com/v2/movie/in_theaters?start=0&count=20//2）热映详情页-detail//https://api.douban.com/v2/movie/subject/25894431//3）即将上映//https://api.douban.com/v2/movie/coming_soon?start=0&count=20//他们共通的部分是://https://api.douban.com/v2/movie//var API_URL='https://api.douban.com/v2/movie'//1.type页面类型,params参数function fetchApi(type,params){//这里是es6的语法//https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html#wxrequestobject//wx.request(OBJECT)//wx.request发起的是 HTTPS 请求。return new Promise((resolve,reject)=>{//1.下面这部分是从帮助文档中copy出来的//wx.request({//2.这样指定api的地址,请求地址 url: '${API_URL}/${type}', //仅为示例，并非真实的接口地址 // 3.data: { // x: '' , //y: '' //}, //data这里我用传过来的data:params, header: { //4.application/json //换成json 'content-type': 'json' }, //4.success: function(res) { // console.log(res.data) // } //这里咱们指定成功的函数是: //resolve //失败的函数是: //fail:reject // success:resolve, fail:reject})})}//5.这里定义的module.exports//这种方式定义的函数,可以给外界的其他页面使用//帮助文档://https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/module.html//模块化//我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。//需要注意的是：//exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以我们更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。//小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。//module.exports={getList:fucntion(type,pn){//6.pn是第几页,count是每页多少//条数据//https://api.douban.com/v2/movie/in_theaters?start=0&count=20//这里的type应该是in_theaters//fetchApi(type,{"start":pn,"count":20}).then(res=>res.data)}}新闻热点
疑难解答
