×

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

96
龙衣袭
2018.09.09 11:56* 字数 965

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

介绍

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

开发工具

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

官方文档

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

熟悉代码结构

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

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

具体可通过这个截图中的路径在官方文档中对应查找(点击图片查看大图),文档地址

小程序-框架.png

第一个页面

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

小程序-第一个页面.png

轮播图的实现

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

  • 效果图


    小程序-banner.png

动态的新闻列表页面

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

  • 标签使用
  • css 样式学习
  • 效果图


    小程序-banner.png

新闻详情页面

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

  • 原图(自己用微软画图画的,是不是很漂亮,不要打我,哈哈哈)


    文章详情.png
  • 效果图


    小程序-文章详情.png

图片页面

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

  • 效果图


    小程序-福利页面.png

查看大图页面

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

  • 查看大图效果图


    小程序-查看大图.png

个人页

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

调试小程序

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

  • Console (完成)

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

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

  • NetWork (完成)

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

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

  • Storage (进行中~~)

查看缓存

  • Wxml (完成)

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

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

  • AppData (完成)

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

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

微信小程序
Web note ad 1