详解微信小程序开发(项目从零开始) .pdfVIP

详解微信⼩程序开发（项⽬从零开始）

⼀、序

微信⼩程序，估计⼤家都不陌⽣，现在应⽤场景特别多。今天就系统的介绍⼀下⼩程序开发。注意，这⾥只从项⽬代码上做解

析，不涉及⼩程序如何申请、打包、发布的东西。（这些跟着微信官⽅⽂档的流程⾛就好）。好了废话不多说，看⽬录。

注:⼩程序是⼀套特殊的东西，融合了原⽣和web端。他是⼀个不完整的浏览器对象，所以很多DOM、BOM的东西⽆法使

⽤，但是他⼜通过微信APP实现了多线程。

⼆、如何创建⼩程序

很简单，⾸先下载微信开发者⼯具，下载稳定版本的就好。然后，创建⼩程序，可以参考下述图⽚：

注意正式的⼩程序需要审批，拿到正式的APPID，我们测试的或者暂时没有的可点那个测试的appid，⼩程序模板选择默认就

好。按照这样的流程⾛完，我们就创建完⼀个⼩程序了。

三、webstrom⽀持⼩程序开发

创建完⼩程序之后，我们先不着急开发。⼯欲善其事必先利其器，微信开发者⼯具有点卡，⽽且功能少，开发效率很低。所以

我们还是改造⾃⼰的编译器，这⾥只介绍2种⽅法。⼀是hbuilderX，他有⽀持⼩程序的模块，很⼩巧的⼀款编译器；⼆是

webstorm，我⽤的他，在这介绍⼀下配置的⽅法，其他的⼤家⾃⾏google吧。

1、⽀持wxml和wxss的⽂件类型，有语法⾼亮。打开webstorm编译器，依次点击⽂件--设置--编辑器--⽂件类型，找到

html⽂件，添加*.wxml;找到CascadingstyleSheet，添加*.wxss。就OK了

2、⽀持⼩程序代码提醒。这个⽂件，然后，把他放到⼀个显眼的地⽅；然后，webstorm点击⽂件--导⼊设置，找到这个

下载的⽂件，点击确定即可。

以上就是webstorm⽀持⼩程序语法的操作。

四、基础⽂件⽬录详解

然后解释⼀下⼩程序的⽬录结构。

project.config.json:⼩程序的配置⽂件，包含项⽬打包配置、上传代码⾃动压缩等等，是⼀些开发、打包之类的配置。

app.json:当前项⽬的配置⽂件。包括项⽬的页⾯引⼊、导航条颜⾊、导航条标题等等，是项⽬具体到代码开发上的配置。介

绍⼏个配置：

pages：包含的页⾯。每次新增页⾯都得在这⾥引⼊，否则新页⾯的json配置等⽆法⽣效。注意pages中页⾯先写的先渲染，

所以数组第⼀条也就是我们的⾸页。

window：配置所有页⾯导航条字体、颜⾊、背景⾊等

app.js:⼩程序⼊⼝⽂件。⽣成⼩程序实例，App({}),通常在这获取⽤户信息、授权信息、定义全局变量等。

app.wxss:⼩程序全局style⽂件。对整个项⽬页⾯⽣效。通常规定项⽬的字体、基础颜⾊，定义⼀些公共样式。

utils:⼯具函数⽬录。通常⽤来放⼀些公共的js⽅法。⽐如封装的request请求，⼀些别的处理数据什么的⽅法。

pages:⼩程序的页⾯⽬录。所有的⼩程序页⾯，都写在这⾥⾯。

五、完善项⽬⽬录

上边⼤致解释了⼀下⼩程序的基础⽂件，现在按照常见的规范完善⼀下项⽬⽬录，这⾥⾯包含⼀些个⼈见解，有需要的参考即

可。先看⼀下结果：

现在解释⼀下这些⽬录：

components：我们封装的⼩程序可复⽤组件。

constants：⼀些项⽬中的常亮。

image：⽤到的图⽚。

services：⽤到的所有接⼝⽬录

⼤致就新建了这⼏个，如果有别的需求，根据⾃⼰的情况增加。

六、基础语法详解

现在⼤致解释⼀下⼩程序的语法。⾸先，创建新页⾯，默认都创建*.wxml*.wxss*.js*.json和我们平时写的代码差不多，都

是htmljscss，多了个json配置⽂件

*.json：常⽤的属性有2⼤块，navigationBarTitleText相关的设置顶部标题的，usingComponents引⽤的组件

*.js：getApp()获取⼩程序实例，拿全局变量等；Page({})创建页⾯；data当前页⾯的变量；onLoad⽣命周期，页⾯加载完

毕。

*.wxml：注意，⼩程序⽀持的标签很少，像span是⽀持的，div不⽀持，⼀般⽤view代替块级，span、text代替⾏级。

*.wxss：⼤部分css选择器不⽀持，⽀持的好像才5个，想⽀持less等得⾃⼰配置

//json⽂件

{

navigationBarBackgroundColor:#fff,

navigationBarTextStyle:black,

navigationBarTitleText:我的