微信小程序入门开发总结（傻瓜式教程）

罗密欧山伯 · 发表于 2018-7-23 15:04

本帖最后由罗密欧山伯于 2018-7-23 16:02 编辑

给小程序零基础的开发者的傻瓜式教程，新人初来乍到，望大家喜欢。
开发小程序基础：HTML、CSS、JavaScript。不过本文暂不考虑这些，我们来大体介绍一下
首先，要开发小程序你需要申请一个微信公众平台账号，在微信公众平台用自己的微信号直接申请就可以了。
然后就要下载开发者工具来写代码、上传、预览。微信公众平台有提供
登录。

项目目录是你的代码存放地；AppID是小程序的账号，需要申请，且每个邮箱只能申请一个，我们可以先体验小程序来跳过输入AppID（远程调试等功能会不能使用，但不影响我们写和编译）；项目名称是在开发工具上显示的名字，和小程序内容无关，就是个昵称。

快速启动模板是微信为了让使用者快速入门提供的一个简单的Hello World！程序，内容代码包含很多注释，可以快速上手。

打开以后长这样。开发工具的具体各种功能都是傻瓜式的，与一些开发工具差别不大，自己探究吧！

可以看到快速启动模板上有两个文件夹和四个文件：pages和utils，app.js、app.json、app.wxss、project.config.json。

pages文件夹里面存放的文件是要显示的各页面，每个子文件夹就是一个页面的内容,子文件夹又包含4个文件，.js、.json、.wxss、.wxml。
.wxml文件是界面文件；
.js是事件交互文件，用于进行逻辑处理；
.wxss为界面美化文件，控制界面格式；
.json为每页配置文件，可以修改导航栏显示样式；
其实整个小程序就是由这四种文件构成的各个页面。
utils文件夹主要用于存放一些全局调用的.js文件，比如需要用到的外部API等。

在根目录下的app.js、app.json、app.wxss等文件主要功能也如上面所说，但app文件主要负责全局调控。

app.js : 方法处理文件，进行程序刚开始运行时事件处理，处理小程序的生命周期函数；
app.json : 全局配置文件，配置小程序的所有页面（所有页面必须先在这里声明），小程序背景色，导航条样式，标题(注意该文件不可添加任何注释)；
app.wxss : 全局的界面美化，配置页面默认样式，当加载其他页面时，当前页面的wxss文件会覆盖app.wxss文件；
由于名字叫小程序，所以程序一定要小，官方规定代码不可以超过2M。

这篇文章我在其他地方发过，但绝对是原创，对零基础的同学挺有用，大家可以看看，大佬不要嫌弃

DayDayUP_lin · 发表于 2018-7-23 15:20

感谢分享

罗密欧山伯 · 发表于 2018-7-25 20:14

bujueshi 发表于 2018-7-25 18:46
楼主，现在小程序的火爆程度怎么样？

怎么说呢，张小龙对小程序的期望很大，一直到现在都一直是微信的重中之重，但是在火了一段时间后，小程序就有些弱了，远没有达到腾讯的期望值。腾讯肯定还会对小程序大力的支持。不过小程序确实是学习过程中很好的练手的工具。

sophieroyal · 发表于 2018-7-23 15:28

楼主图片一张都看不到！

深蓝c · 发表于 2018-7-23 15:30

感谢楼主分享！

充电室 · 发表于 2018-7-23 15:36

建议楼主不要直接从你那个公众号上复制过来，微信公众平台图片复制过来会看不到的

吕小蒙 · 发表于 2018-7-23 15:42

图片都看不到- -

罗密欧山伯 · 发表于 2018-7-23 15:44

充电室发表于 2018-7-23 15:36
建议楼主不要直接从你那个公众号上复制过来，微信公众平台图片复制过来会看不到的

sorry，马上改

小波666 · 发表于 2018-7-23 15:51

我想问下楼主还没有结束吧？

小波666 · 发表于 2018-7-23 15:51

这图片和文字就没有结合好

罗密欧山伯 · 发表于 2018-7-23 15:52

sophieroyal 发表于 2018-7-23 15:28
楼主图片一张都看不到！

sorry，sorry，改好了

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 微信小程序入门开发总结（傻瓜式教程）

免费评分