微信小程序开发学习笔记007--微信小程序项目01
发布日期:2021-06-29 17:57:24
浏览次数:3
分类:技术文章
本文共 4207 字,大约阅读时间需要 14 分钟。
技术交流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) } }转载地址:https://credream.blog.csdn.net/article/details/58589331 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
感谢大佬
[***.8.128.20]2024年04月22日 16时09分58秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
如何设计自己的第一个加密交易机器人?
2019-04-29
TKDE 2020 | 综述:基于知识图谱的推荐系统
2019-04-29
在后台的python:众多程序员无法攻克的难题
2019-04-29
国会大厦骚乱,与一家极不可靠的面部识别公司……
2019-04-29
电动汽车的“专属危险”:网络威胁问题不容小觑
2019-04-29
统治50年:为什么SQL在如今仍然很重要?
2019-04-29
测试是一场竞争,而数据每次都会获得胜利
2019-04-29
复工之后:员工如何改善网络安全?
2019-04-29
2020-10-27
2019-04-29
2021-03-29
2019-04-29
网络攻击与防御--网络协议漏洞
2019-04-29
sql注入: 判断注入点类型
2019-04-29
千人千面Elasticsearch实战学习笔记
2019-04-29
最大子数组问题(递归)(java)
2019-04-29
2021年第十二届蓝桥杯软件赛省赛第二场 C/C++ 大学 A 组
2019-04-29
2020年哨兵数据批量下载(USGS)
2019-04-29
简单3步快速生成千万级别mysql测试数据库,模拟电商数据
2019-04-29
EasyDSS平台接入设备量过多的情况下如何进行批量推流测试?
2019-04-29
mysql数据库操作基础
2019-04-29
Mariadb基础管理
2019-04-29