介绍微信开发者工具以及微信小程序框架.pdfVIP

介绍微信开发者⼯具以及微信⼩程序框架 ⼀直不温不⽕的微信⼩程序2018年迎来了第⼆春，在我的记忆中随着跳⼀跳⼩游戏的出现，⼀时间数千万的微信⼩程序 如⾬后春笋般出现在我们的视线⾥。追着这波⼤浪潮，笔者所在的公司也开始将有些需求转移到微信⼩程序上。接下来 将以⼏篇⽂章将最近的⼀个⽇历打卡⼩程序的开发过程以及遇到的问题和⼤家做个分享。 （⼀）微信开发者⼯具⼩程序团队推出了⾃⼰的开发⼯具-微信开发者⼯具，⽬前微信开发者⼯具任然在不断的完善 中，在开发⼩程序时经常要不断的更新。论坛上吐槽的⽂章也是⼀⼤堆，存在很多bug，笔者在开发过程中也是被它坑 过。笔者是安卓开发者，习惯于这种可视化的编程，所以没有选择Webstrom或者其他开发⼯具，接下来将介绍微信开 发者⼯具基本功能。 机型选择：⼩程序以IPhone6的屏幕尺⼨为设计标准，让UI⼩姐姐按照IPhone6屏幕尺⼨来切图。 预览界⾯：写好视图布局后点击编译，视图界⾯刷新显⽰远程调试：⼿机端和PC端开发⼯具联调 （⾮常实⽤）上传代 码：上传到腾讯服务器，提交审核必经步骤。可以填写版本号和备注信息。 5-1 ：代码体积，微信限制 2M 以内。5-2 ：ES语法转换，开发中⼀般不校验合法域名信息。5-3 ：域名信息：⼩程序后 台要做配置服务器域名，有request 域名，socket 域名以及uploadFile和downloadFile域名。注意：域名⼩程序要求必 须是https控制台：打印输出信息，⽅便调试资源⽂件：对应项⽬的⽂件⽬录，⼀般可以在这⾥进⾏断点调试本地数据存 储：显⽰的是本地存储的数据，对应的相关API是wx.setStorageSync(key,data)视图调试：标组件以⼦⽗层级结构呈 现，⽅便调试。以上就是在开发过程中微信开发者⼯具常⽤到的功能，微信开发者⼯具也在不断的完善，为了以后更好 的提升开发效率，也需要我们在开发过程中将遇到的问题不断的反馈给⼩程序团队做优化，希望⼤家抱着包容的⼼态。 开发过程中⼤家也可以依照⾃⼰的习惯选择其他的开发⼯具。 （⼆）⼩程序框架以及⽬录结构介绍 逻辑层⼩程序开发框架的逻辑层由 JavaScript 编写。逻辑层将数据进⾏处理后发送给视图层，同时接受视图层的事件反 馈。逻辑层对应的是js⽂件，在每个页⾯的js⽂件中，系统提供了⼀系列的⽅法如：页⾯⽣命周期(),onShow(),onHide(), 等，下拉刷新onPullDownRefresh()，页⾯到底部（上拉加载）onReachBottom()⽅法，分享功能 onShareAppMessage()等。视图层框架的视图层由 wxml 与 wxss 编写，由组件来进⾏展⽰。将逻辑层的数据反应成视 图，同时将视图层的事件发送给逻辑层。wxml 由⼩程序提供的组件组成，wxss 是css 样式。 app⽂件 app.json ⽂件⽤来对微信⼩程序进⾏全局配置，决定页⾯⽂件的路径、窗⼝表现、设置⽹络超时时间、设置多 tab 等。 页⾯的json⽂件⼀般⽤来配置当前页⾯的窗⼝表现。app.js ⽤来提供全局变量，如baseUrl。app.wxss 提供全局的css样 式 utils/.json 系统提供的⼯具类，⼀般编写公共的⽅法导出⽅便其他页⾯调⽤。