手把手教你写一个微信小程序

最近比较闲，利用业余时间，为我的公众号写了一个比较简单的小程序

代码地址：https://github.com/shengaona/wxProject

点这里，看源码

如果对你有帮助欢迎大家点亮github上的小星星

教程列表页 教程详情页 欢迎扫码体验

现在微信小程序越来越火，用户不需下载安装app即可体验产品，产品推广和运营也比较方便，这些优点使得越来越多的企业选择开发微信小程序，所以会写小程序也成为前端比较重要的技能，今天就来教大家怎么入门微信小程序。

1，申请帐号

点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。

登录 https://mp.weixin.qq.com ，我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。

2，安装开发工具

点这里

前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

3，开始创建项目

先创建一个空文件夹

然后打开开发者工具，新建项目，按需选择启动模板，这里选择的是建立普通快速启动模板

点击确定后，你的小程序就创建好啦。

默认的项目结构

关于默认项目结构里的介绍，我就不一一说明，大家可自行查阅官方文档点这里

我们可以先删除logs这个文件夹，在index文件夹同级创建一个新的文件夹，取名detail，并在该文件夹下创建同名的js,json,wxml和wxss等文件

然后在app.json配置detail页面路由，删除logs的路径

先来写列表页吧

页面结构

页面结构分成三个部分：banner，tab, list

页面代码wxml json js js js js wxss wxss

这里说明一下，因为我没有后台接口，所以数据都是自己写在通用文件里导入的

data.js data.js 在index.js引入 拿到数据并塞入数据

index页面就说这么多了

下面说说detail页面

detail里面用到了关于如何渲染html  这里请看我上篇文章哦

wxml wxss js json

这里项目基本就写完了

发布上线

点击工具并上传代码

登录平台 提交审核

审核大概需要一天左右的时间，审核通过后发布代码就可以了

本文有很多细节没有说明 大家先看看官方开发文档，对小程序的生命周期以及api进行简单的了解就会开发起来很顺手了

好了，分享就到这里啦

祝大家写的愉快~