小程序开发快速入门教程
<p>原文链接： 点我</p><div>
<p>1：用没有注册过微信公众平台的邮箱注册一个微信公众号， 申请帐号 ,点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。注册完成之后开始登录。</p>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="640" data-height="328"><img src="//upload-images.jianshu.io/upload_images/5640239-fe89da4a6d6293c1?imageMogr2/auto-orient/strip%7CimageView2/2/w/640/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-fe89da4a6d6293c1" data-original-width="640" data-original-height="328" data-original-format="" data-original-filesize="19280"></div>
</div>
</div>
<p>2：登录 https://mp.weixin.qq.com</p>
<p>我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。有了小程序帐号之后，我们需要一个工具来开发小程序。<br>
根据官方教程进行开发https://mp.weixin.qq.com/debug/wxadoc/dev/</p>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="640" data-height="245"><img src="//upload-images.jianshu.io/upload_images/5640239-6420449f39a5f02f?imageMogr2/auto-orient/strip%7CimageView2/2/w/640/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-6420449f39a5f02f" data-original-width="640" data-original-height="245" data-original-format="" data-original-filesize="17047"></div>
</div>
</div>
<p>3：安装开发工具</p>
<p>前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。打开小程序开发者工具，用微信扫码登录开发者工具，准备开发你的第一个小程序吧！我的电脑是64位的：</p>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="640" data-height="411"><img src="//upload-images.jianshu.io/upload_images/5640239-bb20037f383d611c?imageMogr2/auto-orient/strip%7CimageView2/2/w/640/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-bb20037f383d611c" data-original-width="640" data-original-height="411" data-original-format="" data-original-filesize="30219"></div>
</div>
</div>
<p>4：安装完成之后</p>
<p>你的第一个小程序开启：新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，最后，勾选 "创建 QuickStart 项目" (注意: 你要选择一个空的目录才会有这个选项)，点击确定，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在 IDE 预览你的第一个小程序。</p>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1" data-height="1"><img src="//upload-images.jianshu.io/upload_images/5640239-96feaf1d70db9068.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-96feaf1d70db9068.gif" data-original-width="1" data-original-height="1" data-original-format="" data-original-filesize="70"></div>
</div>
</div>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="309" data-height="391"><img src="//upload-images.jianshu.io/upload_images/5640239-6abdcdef21f8dd0e?imageMogr2/auto-orient/strip%7CimageView2/2/w/309/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-6abdcdef21f8dd0e" data-original-width="309" data-original-height="391" data-original-format="" data-original-filesize="13726"></div>
</div>
</div>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="640" data-height="320"><img src="//upload-images.jianshu.io/upload_images/5640239-2fb31c1e694d52d7?imageMogr2/auto-orient/strip%7CimageView2/2/w/640/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-2fb31c1e694d52d7" data-original-width="640" data-original-height="320" data-original-format="" data-original-filesize="18715"></div>
</div>
<div class="image-caption">image</div>
</div>
<p>5：编译预览</p>
<p>点击工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击预览按钮，通过微信的扫一扫在手机上体验你的第一个小程序。OK，你已经成功创建了你的第一个小程序，并且在微信客户端上体验到它流畅的表现。</p>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="370" data-height="522"><img src="//upload-images.jianshu.io/upload_images/5640239-170e5475874c254b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/370/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-170e5475874c254b.png" data-original-width="370" data-original-height="522" data-original-format="" data-original-filesize="13130"></div>
</div>
</div>
<h1>小程序初始化目录：</h1>
<p>1：page页面文件夹 存放项目页面渲染相关文件</p>
<br>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="307" data-height="237"><img src="//upload-images.jianshu.io/upload_images/5640239-b6e071a3f3093ca4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/307/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-b6e071a3f3093ca4.png" data-original-width="307" data-original-height="237" data-original-format="" data-original-filesize="4688"></div>
</div>
</div>
<p>2：utils存放js库和数字格式化文件</p>
<br>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="305" data-height="53"><img src="//upload-images.jianshu.io/upload_images/5640239-d19867a06ac74b5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/305/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-d19867a06ac74b5c.png" data-original-width="305" data-original-height="53" data-original-format="" data-original-filesize="1168"></div>
</div>
</div>
<p>3：配置文件</p>
<br>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="296" data-height="105"><img src="//upload-images.jianshu.io/upload_images/5640239-24725361773bb62f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/296/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-24725361773bb62f.png" data-original-width="296" data-original-height="105" data-original-format="" data-original-filesize="2361"></div>
</div>
</div>
<h1>我是分割线===开发ing</h1>
<p>接下来就要开始开发了，我是第一次开发微信小程序，所以显得特别的生疏，以至于无从下手，纠结了很久，找朋友要了一套模板，导入自己的小程序开发工具里面，对整个小程序目录文件结构有了一定的了解，就能很快的上手。</p>
<p>另外也在网站，GitHub上找了很多完整的小程序源码，学习起来速度也是相当快。</p>
<p>小程序的思想是：小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。</p>
<p>1:第一个简单小程序：极客小寨</p>
<br>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1362" data-height="657"><img src="//upload-images.jianshu.io/upload_images/5640239-74d84d2039ca80d2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-74d84d2039ca80d2.png" data-original-width="1362" data-original-height="657" data-original-format="" data-original-filesize="70692"></div>
</div>
</div>
<p>2:第二个简单小程序：输入网址生成相应的二维码</p>
<br>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1359" data-height="674"><img src="//upload-images.jianshu.io/upload_images/5640239-a43cdfdfa8fde511.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-a43cdfdfa8fde511.png" data-original-width="1359" data-original-height="674" data-original-format="" data-original-filesize="72513"></div>
</div>
<div class="image-caption">完成一个最简易的界面</div>
</div>
<p>3:第三个简单小程序：发送祝福</p>
<br>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1365" data-height="695"><img src="//upload-images.jianshu.io/upload_images/5640239-b11d4d0095860cc7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-b11d4d0095860cc7.png" data-original-width="1365" data-original-height="695" data-original-format="" data-original-filesize="66717"></div>
</div>
<div class="image-caption"> </div>
</div>
<p>4:第四个简单小程序：仿网易云音乐</p>
<br>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1330" data-height="599"><img src="//upload-images.jianshu.io/upload_images/5640239-c55b3a2db83a2232.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-c55b3a2db83a2232.png" data-original-width="1330" data-original-height="599" data-original-format="" data-original-filesize="44485"></div>
</div>
<div class="image-caption">网易云音乐</div>
</div>
<h1>示例步骤：</h1>
<p>1：右键键盘打开</p>
<br>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="710" data-height="471"><img src="//upload-images.jianshu.io/upload_images/5640239-54b87f5a19b1ecf7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/710/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-54b87f5a19b1ecf7.png" data-original-width="710" data-original-height="471" data-original-format="" data-original-filesize="27985"></div>
</div>
</div>
<br>
<p>2：把源码复制黏贴进去，替换掉原来初始化目录，点击普通编译，即可查看左侧效果，根据需要，作相应的增删</p>
<br>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="655" data-height="209"><img src="//upload-images.jianshu.io/upload_images/5640239-cc4f646f72c18154.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/655/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5640239-cc4f646f72c18154.png" data-original-width="655" data-original-height="209" data-original-format="" data-original-filesize="12275"></div>
</div>
</div>
<p>到此为止小程序顺利入门，三天上手，接下来就是一系列的边学学习开发文旦边开发边踩坑的过程了，多读小程序源码，想想也不是那么难的一件事情咯</p>
</div>
</div>
<div id="MySignature" role="contentinfo">
<div id="signature" style="margin-top: 20px; background-color: #AED7ED; padding: 10px 20px 10px 20px; font-size: 14px">
<p>
作者：时来运转
<br>
大佬们好，我是Web前端菜鸟，初来乍到，想跟诸位共同学习成长；
<br>
综上是我每日闲时整理笔记，文章如有侵权请诸位及时告知我，谢谢关照！
</p>
</div><br><br>
来源：https://www.cnblogs.com/myfate/p/11196827.html
頁:
[1]