重度嗜睡患者 發表於 2021-6-26 20:24:00

【学习记录】微信小程序：前端开发

<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>小程序前端开发实战<ul><li>前期工作</li><li>小程序代码框架</li><li>WXML学习</li><li>WXSS学习</li><li>JS学习</li><li>API介绍</li></ul></li></ul></div><p></p>
<blockquote>
<p>更新时间：2021年6月26日</p>
</blockquote>
<p><strong>说明</strong>：写作此系列有两个目的，①复习微信小程序开发技术（前端+后端）；②为微信小程序初学者提供一些帮助。以后一定要养成通过写博客记录学习过程的好习惯，不然时间长了真的会忘……</p>
<p>我学习的课程是“学堂在线”上的学做小程序——实战篇：树洞小程序</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210626172139933-1359394402.png">
<p>axlsdtkl/wechat-mini这是下面这位大佬上传到github上的treehole项目，如果觉得跟着视频敲代码太慢了，可以下载下来跟着课程阅读源码。</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210626172831640-105627701.png">
<p>课程前三章分别是：①课程导论；②如何开始第一步；③产品原型设计实践，如果想系统地了解开发一个微信小程序的过程，这部分内容还是有必要学习下的。我们从<strong>第四章</strong>开始学习。</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210626175342837-109683490.png">
<h2 id="小程序前端开发实战">小程序前端开发实战</h2>
<blockquote>
<p>这一章介绍了微信小程序开发者工具的使用、小程序代码框架、以及html+css+js的入门知识。</p>
</blockquote>
<p><strong>小程序前端开发推荐工具包括</strong>：</p>
<ul>
<li>微信开发者工具（小程序开发工具）</li>
<li>iconfont-阿里巴巴矢量图标库（小图标获取网站）</li>
<li>CSS取色器（在线获取/查看颜色）</li>
</ul>
<h3 id="前期工作">前期工作</h3>
<p>微信小程序的<strong>接入流程</strong>包括：注册；小程序信息完善；开发小程序；提交审核和发布。</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210626192910775-1833549761.png">
<p>开发小程序前要先完成<strong>小程序注册</strong>。进入注册页面微信小程序，按照步骤完成：帐号信息；邮箱激活；信息登记三步。之后扫码登录，并完善小程序信息，点击下图中的<strong>开发设置</strong>可以查看AppID，类似微信小程序的“身份证号”。</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210626193611178-1582465864.png">
<p>打开微信开发者工具，选择小程序项目，填写表单后创建小程序。如果不使用云开发技术，就选择“不使用云服务”选项。</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210626194822320-1058002077.png">
<p>点击“新建”，进入开发界面。快捷键<code>Alt+Shift+F</code>可以格式化代码。开发者文档微信开放文档可以帮助我们完成小程序的开发。</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210626194916555-1871457751.png">
<p>⭐开始 | 微信开放文档</p>
<h3 id="小程序代码框架">小程序代码框架</h3>
<p>微信小程序实质上是一款基于<strong>web</strong>技术的应用程序。微信小程序 ≈ 网站前端，他们使用的开发语言，代码结构以及代码的运行机制是一样的。</p>
<p><strong>微信小程序代码框架介绍</strong>：</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210626200210962-1578818634.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210626200213027-1511093594.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210626200214933-939378551.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210626200347086-1753038489.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210626200354229-611280285.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210626200355052-1093799672.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210626200357367-373579439.jpg">
<p>⭐小程序代码构成 | 微信开放文档</p>
<blockquote>
<p>更新时间：2021年6月27日</p>
</blockquote>
<p>刚刚在阅读微信开放文档时，发现里面还“隐藏”着一份教程《小程序开发指南》，有待后续阅读。</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210627154020163-534727365.png">
<blockquote>
<p>更新时间：2021年6月29日</p>
</blockquote>
<h3 id="wxml学习">WXML学习</h3>
<p>⭐WXML | 微信开放文档</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150010275-1917842596.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150215586-1470712772.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150220551-51067769.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150221747-1002265026.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150223348-2033898601.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150224110-730362202.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150225845-666689942.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150227058-760323638.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150228044-1529414764.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150229057-1121870108.jpg">
<p>⭐视图容器 | 微信开放文档</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150229678-517710107.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150231726-654310497.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150232612-1771177180.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150233508-404108017.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150235265-1223917072.jpg">
<p>⭐数据绑定 | 微信开放文档</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150236128-387005691.jpg">
<p>⭐列表渲染 | 微信开放文档</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629150237414-17811915.jpg">
<p>⭐条件渲染 | 微信开放文档</p>
<h3 id="wxss学习">WXSS学习</h3>
<p>⭐WXSS | 微信开放文档</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629153352592-11307472.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629153355761-1041216024.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629153357221-302998368.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629153359082-889324806.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629153401071-1804938039.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629153402731-698185392.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629153404422-1569686124.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629153406002-1754639611.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629153407610-1220542248.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154501201-1972716766.jpg">
<h3 id="js学习">JS学习</h3>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154703547-1451274273.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154705359-256283993.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154707113-371301055.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154710273-8404095.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154711666-1515015230.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154712976-849583237.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154714363-1988931746.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154716136-148427547.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154717605-2131052230.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154719685-406405113.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154722036-1718669556.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154727560-1658435851.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154728969-1096347199.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154730442-1492956547.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154732735-1329219240.jpg">
<p>⭐事件 | 微信开放文档</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154736619-482491043.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629154738237-822110890.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629160718385-241016238.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629160719852-120498232.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629160721018-1730842135.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629160722478-1335800943.jpg">
<p>⭐运行时性能 | 微信开放文档</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629160724203-488989419.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629160726639-72638849.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629160727749-1104958111.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629160729191-715284308.jpg">
<h3 id="api介绍">API介绍</h3>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629161836369-166402307.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629161837354-507955426.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629161838685-1307351826.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629161840125-1122727453.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629161841539-229042336.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629161842719-1747186481.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629161843970-1782616814.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629161845377-170097074.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629161846759-459125409.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629161848381-1159960599.jpg">
<p>⭐wx.getUserInfo(Object object) | 微信开放文档</p>
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629161850897-1757513814.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629161852461-1631494149.jpg">
<img src="https://img2020.cnblogs.com/blog/1555613/202106/1555613-20210629161854034-889798469.jpg"><br><br>
来源：https://www.cnblogs.com/zhulu506/p/14938966.html
頁: [1]
查看完整版本: 【学习记录】微信小程序：前端开发