微信小程序-从0到1的实现简单例子的填坑之旅(持续更新完善~)
目录可以不用按照顺序来阅读,需要了解哪方面的信息直接阅读对应的文章即可。本人也是小程序开发小白,文中如有错误多谢指出,共同进步!
介绍
小程序的特点以及和传统App的区别 微信小程序和原生APP之间的优势与差异分析
开发工具
官方下载地址 微信开发者工具
官方文档
官方文档!小程序官方文档
熟悉代码结构
知道每个层级代表什么意思,了解每个文件的作用。
- JSON 配置
- WXML 模板
- WXSS 样式
- JS 交互逻辑
具体可通过这个截图中的路径在官方文档中对应查找(点击图片查看大图),文档地址
第一个页面
Hello World ? 太 Low 了,来个实现效果看看!!
- 首页引导图(完成)
利用 必应首图 作为首页。详细实现过程—–>微信小程序-利用必应首图接口实现引导页
轮播图的实现
使用小程序的
swiper
组件功能(完成)
效果图
详细实现过程—–>微信小程序-利用干货*的福利接口实现 banner 轮播图
图片数据来源 干货*
banner 下方的列表采用的也是干货*的数据,非常感谢!
动态的新闻列表页面
小程序标签使用、css 样式设计(完成)请求网络数据,填充页面(完成)
- 标签使用
- css 样式学习
- 效果图
新闻详情页面
收藏、阅读数统计、分享,以及小程序的交互组件使用
~~直接使用 web-view 组件显示 新闻详情(完成)~~
个人开发者不支持web-view
显示网页…那只能自己画一个吧。(完成)
- 原图(自己用微软画图画的,是不是很漂亮,不要打我,哈哈哈)
- 效果图
图片页面
网格布局、模板的使用(完成)
- 效果图
查看大图页面
查看大图(完成),保存图片(待完成)
- 查看大图效果图
个人页
显示登陆信息(进行中~~)。
调试小程序
调试面板的使用(进行中)
Console (完成)
日志台,用于开发时打印结果或者打印错误日志。
有时候页面传递值,或者是你想确定值是否是你想要的,可以通过console
打印到控制面板来查看,这是开发必备的功能啊~
- NetWork (完成)
在调用网络接口时,可以查看网络状态,返回 200 则请求成功。
请求网络接口的时候还是很管用的哦~
- Storage (进行中~~)
查看缓存
- Wxml (完成)
查看运行时的页面结构,可以查看你在页面中绑定的数据是否真正的绑定成功。
有时候你的小程序编译完成了,但是控制台没有报错,可以通过查看 wxml
面板,查看页面是否加载出来,数据是否显示在界面上,非常管用哦~,或者你还可以通过 AppData
来查看
- AppData (完成)
App的数据,可以查看页面中调用具体方法的返回结果。
在请求网络数据的时候,有时候返回200
的状态码,但是界面没有显示数据,你可以通过查看AppData
面板,确认数据是否返回,非常 nice.