微信小程序开发学习笔记007--微信小程序项目01
技术交流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)
}
}
微信小程序开发学习笔记007--微信小程序项目01相关推荐
- 微信小程序开发学习笔记002--微信小程序框架解密
1.今天内容比较多, 框架解密 • 目录结构 • 配置文件详解 • 逻辑层 • Api简介 ----------------------- 2.打开微信开发工具, 点击添加项目,选择无appid模 ...
- 微信小程序开发学习笔记004--微信小程序语法结构
今天讲微信小程序的语法结构 技术交流QQ群:170933152 数据绑定:把数据声明后显示在页面上 渲染:条件渲染,循环渲染 模板:某个小需求,模块封装成模板 事件:点击一个按钮触发一个事件,发送一个 ...
- 微信小程序开发学习笔记006--微信小程序组件详解02
技术交流QQ群:170933152 案例7:开关选择器 案例8:各种图标 案例9:页面跳转 案例10:多媒体音视频 案例11:嵌入地图 案例12:画布:在上面可以画柱状图等等. 今天继续讲组件: 登录 ...
- 微信小程序开发学习笔记005--微信小程序组件详解
先来再看看事件冒泡: 看个例子,新建项目库credemo05 case1.wxml <view bindtap="fn1"> outer <view bin ...
- 微信小程序开发学习笔记008--微信小程序项目02
技术交流QQ群:170933152 继续项目,做玩命加载中,一进来以后,咱们可以认为是没有数据的. 咱们来做这个玩命加载. 比如咱们在home.js中添加数据: var api = require(' ...
- GTK+图形化应用程序开发学习笔记(五)—组装盒、组合表、固定容器构件
GTK+图形化应用程序开发学习笔记(五)-组装盒.组合表.固定容器构件 一.组装盒 组装盒(GtkBox)也称为组合构件.使用组装盒可以将多个构件放在一个容器中.容器可以把组装盒看作是一个构件.不像按 ...
- GTK+图形化应用程序开发学习笔记(一)—概述
GTK+图形化应用程序开发学习笔记(一)-概述 一.什么是GNOME. GNOME的意思是"GNU Network Object Model Environment"(GNU网络对 ...
- 微信小程序开发学习笔记一
微信小程序学习笔记(一) 环境使用及创建项目 文件目录设置 JS文件 环境使用及创建项目 环境使用:微信开发者工具 一个微信号只能开发一个微信小程序. 在微信小程序开发手册下载最新版本,学习不要bet ...
- 微信小程序开发学习笔记001--认识微信小程序,第一个微信小程序
第一天,认识微信小程序,第一个微信小程序 1.什么是微信小程序? 是h5网页嘛?不是 微信张小龙说: 小程序是一种不需要下载安装即可使用的应用, 它实现了应用"触手可及"的梦想,用 ...
最新文章
- 深入浅出JMS(四)--Spring和ActiveMQ整合的完整实例
- python消息订阅_python rabbitmq消息发布订阅
- 第二章:图像处理基础
- Python 利用pymupdf将pdf转换为图片并拆分,后通过PIL合并生成一张图片
- php爆数据库,php+MySql注入非暴力爆数据库表段
- FGMap学习之--快速入门
- 终极破产的原因——20年玩儿钱与玩观念的的新经济
- 基于Java毕业设计医院药品管理系统源码+系统+mysql+lw文档+部署软件
- python画图——雪花(科赫曲线)
- 前端人事面试问题总结
- office2019选框虚线_手把手教你分析PS2019里怎么画虚线
- 经济学基础之名义利率与实际利率以及他们同复利公式的运用
- 南艺计算机作曲专业怎样,南京艺术学院作曲与作曲技术理论专业/学费/录取分数线/怎么样...
- 电子邮件营销实例---粽子
- 原来是这么做的,在抖音解说电影,6个月赚了40w?
- 多线程情况下如何保证线程安全
- 为什么说石油币是一场“国家骗局”?
- 骨传导耳机是怎么传声的、骨传导耳机的优点是什么
- 基于遗传算法改进的BP神经网络电网负荷预测,GA-BP神经网络电网负荷预测,1000案例之14
- <Linux>使用quilt工具制作补丁(patch)文件
热门文章
- Java线程中断的理解(转载)
- eBPF学习记录(二)使用bpftrace开发eBPF程序
- 个人管理 - Learn More,Study Less!
- React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一)
- python学习——函数及其参数
- SharePoint JavaScript API in application pages
- requestAnimationFrame 优化Web动画
- JS_高程3.基本概念(2)
- [LeetCode]题解(python):012-Integer to Roman
- python3.3使用tkinter实现猜数字游戏代码