微信小程序开发学习笔记007--微信小程序项目01

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lidew521/article/details/58589331

技术交流QQ群:170933152

今天做项目

小程序开发必备基础
如何独立开发一个项目
豆瓣电影


需要的基础:
HTML+CSS
JavaScript
网络


先理解需求-->了解项目流程,项目交互,需要知道后端的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
  }
}
---------------------------
tabBar
networkTimeout
//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=201715
API:
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
4)detail
https://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)
}


}









展开阅读全文

没有更多推荐了,返回首页