零基础制作微信小程序

本文章制作小程序的所有代码都放在github啦

注册账号

微信公众平台（点击跳转至页面）

点击右上角的“立即注册”-选择小程序-使用邮箱进行激活-选择“个人”-用微信扫码成为管理员-成功后进入小程序管理界面-如下图，复制AppID后面会用到

下载微信开发者

开发工具下载地址：稳定版 Stable Build | 微信开放文档 (qq.com)-扫码登录后-进入主界面-新建项目并记住存放该项目的路径

开始制作

以每周电影评分的小程序作为例子，跟着图片一步步来就可以，每一步都很详细（制作过程中有不明白的欢迎随时提问），对于新手只要实现了这个小程序的相关内容，实现其他小程序的基本操作是没有问题的，下图是最终的成果图，有兴趣的就往下看吧，一天速成版

创建项目和目录文件结构

具体还可以配置哪些，可以参考下图或者链接页面配置 | 微信开放文档 (qq.com)

传统的布局

应用弹性盒子布局

响应式长度单位rpx，设置图片大小

新增页面

在pages文件下面添加如下文件

分别在文件中添加如下代码

使用navigator组件，从index页跳转到weekly页

配置底部标签栏tabBar

配置全局的导航栏样式

数据绑定-从视图中抽离出数据

1、一般来说会在页面加载过程中，通过一个ajax调用来请求server返回本周推荐电影的详细信息

2、首先，这种方式需要我们在收到数据之后，或者说每次这个数据被更新的时候，我们都需要执行这样的一段代码来对这个视图进行更新

小程序运行环境与基本架构

每个小程序都是运行在它所在的微信客户端上的，通过微信客户端给它提供的运行环境，小程序可以直接获取微信客户端的原生体验和原生能力
wxml视图文件和wxss样式文件都是对渲染层的描述，脚本文件则是对页面的逻辑层的描述
Index页和weekly页，都内置了一个webviewId的内部状态变量，来记录它们各自是在几号weview进程之中进行渲染的

条件渲染-条件成立时组件才会渲染生成

列表渲染

使用swiper组件-将列表展示变成轮播图展示

页面的生命周期函数

需求1：swiper中如何默认切换到最后一页幻灯片

需求2：非本周幻灯片页添加“返回本周”按钮

需求3：页面状态数据如何初始化、onLoad（options）

需求4：对onShow、onReady、onHide、onUnload这四个周期函数进行介绍

组件的自定义数据属性

需求：从weekly页上的电影卡片跳转到电影详情页

实现电影详情页的基本框架

恢复weekly页上每个“返回本周”按钮的点击行为（catchtap应用）

页面初始化获取query参数：onLoad(options)

发起请求API-wx.request

小程序网络相关API：wx.request、wx.uploadFile、wx.downloadFile、WebSocket相关API

调用豆瓣电影API

动态设置导航栏状态和标题

页面事件处理函数与自定义页面转发

onPullDownRefresh：下拉刷新时调用

onReachBottom：上划触底时调用

onPageScroll：在页面上划动时调用

onShareAppMessage：分享时被调用

需求：给weekly页自定义转发“每周推荐”给detail页自定义转发“向你推荐”