微信小程序-从0到1的实现简单例子的填坑之旅(持续更新完善~)

目录可以不用按照顺序来阅读,需要了解哪方面的信息直接阅读对应的文章即可。本人也是小程序开发小白,文中如有错误多谢指出,共同进步!

介绍

小程序的特点以及和传统App的区别 微信小程序和原生APP之间的优势与差异分析

开发工具

官方下载地址 微信开发者工具

官方文档

官方文档!小程序官方文档

熟悉代码结构

知道每个层级代表什么意思,了解每个文件的作用。

  • JSON 配置
  • WXML 模板
  • WXSS 样式
  • JS 交互逻辑

具体可通过这个截图中的路径在官方文档中对应查找(点击图片查看大图),文档地址
微信小程序-从0到1的实现简单例子的填坑之旅(持续更新完善~)

第一个页面

Hello World ? 太 Low 了,来个实现效果看看!!

微信小程序-从0到1的实现简单例子的填坑之旅(持续更新完善~)
- 首页引导图(完成)
利用 必应首图 作为首页。详细实现过程—–>微信小程序-利用必应首图接口实现引导页

轮播图的实现

使用小程序的 swiper 组件功能(完成)

动态的新闻列表页面

小程序标签使用、css 样式设计(完成)请求网络数据,填充页面(完成)

  • 标签使用
  • css 样式学习
  • 效果图
    微信小程序-从0到1的实现简单例子的填坑之旅(持续更新完善~)

新闻详情页面

收藏、阅读数统计、分享,以及小程序的交互组件使用
~~直接使用 web-view 组件显示 新闻详情(完成)~~
个人开发者不支持 web-view显示网页…那只能自己画一个吧。(完成)

  • 原图(自己用微软画图画的,是不是很漂亮,不要打我,哈哈哈)
    微信小程序-从0到1的实现简单例子的填坑之旅(持续更新完善~)
  • 效果图
    微信小程序-从0到1的实现简单例子的填坑之旅(持续更新完善~)

图片页面

网格布局、模板的使用(完成)

  • 效果图
    微信小程序-从0到1的实现简单例子的填坑之旅(持续更新完善~)

查看大图页面

查看大图(完成),保存图片(待完成

  • 查看大图效果图
    微信小程序-从0到1的实现简单例子的填坑之旅(持续更新完善~)

个人页

显示登陆信息(进行中~~)。

调试小程序

调试面板的使用(进行中)

日志台,用于开发时打印结果或者打印错误日志。

有时候页面传递值,或者是你想确定值是否是你想要的,可以通过console打印到控制面板来查看,这是开发必备的功能啊~

  • NetWork (完成)

在调用网络接口时,可以查看网络状态,返回 200 则请求成功。

请求网络接口的时候还是很管用的哦~

  • Storage (进行中~~)

查看缓存

  • Wxml (完成)

查看运行时的页面结构,可以查看你在页面中绑定的数据是否真正的绑定成功。

有时候你的小程序编译完成了,但是控制台没有报错,可以通过查看 wxml面板,查看页面是否加载出来,数据是否显示在界面上,非常管用哦~,或者你还可以通过 AppData来查看

  • AppData (完成)

App的数据,可以查看页面中调用具体方法的返回结果。

在请求网络数据的时候,有时候返回200的状态码,但是界面没有显示数据,你可以通过查看AppData面板,确认数据是否返回,非常 nice.