一、前言

微信小程序大家都不陌生，现在有很多应用场景。今天，我将系统地介绍一下小程序的开发。注意这里只分析项目代码，不涉及如何申请、打包、发布小程序。(只需遵循微信公文流程即可)。好吧，让我们废话少说，看看目录。

注：小程序是一套特殊的东西，它结合了原生和网络。他是一个不完整的浏览器对象，所以很多DOM和BOM的东西都不能用，但是他已经通过微信APP实现了多线程。

二、如何创建小程序

很简单，先下载微信开发者工具，然后下载稳定版。下载后再创建一个小程序，可以参考下图：

注意正式的小程序需要审批，并获得正式的APPID。如果我们测试它或者暂时没有它，我们可以点击那个测试的appid。只需选择默认的小程序模板。根据这个过程，我们将创建一个小程序。

第三，webstrom支持小程序开发

创建小程序后，我们不担心开发它。如果工人们想尽最大努力，他们必须首先磨利他们的工具。微信开发者工具有点卡，功能少，开发效率低。因此，我们应该改革我们的编译器，这里只介绍两种方法。一个是hbuilderX，它有一个支持小程序的模块和一个非常小的编译器；二是我用的webstorm，这里介绍了配置方法，其他人可以自己谷歌一下。

1.语法高亮支持wxml和wxs的文件类型。打开webstorm编译器，依次点击文件-设置-编辑器-文件类型，找到html文件，添加*。wxml找到级联样式表并添加* .wxss。没关系

2.支持小程序代码提醒。下载这个文件，然后放在显眼的地方；然后，webstorm单击文件-导入设置，找到下载的文件，然后单击确定。

这就是webstorm如何支持小程序语法。

四.基本文件目录详解

然后解释小程序的目录结构。

project . config . js :小程序的配置文件，包括项目打包配置、上传代码自动压缩等。就是开发和打包等一些配置。

当前项目的App.json:配置文件。包括页面介绍、导航栏颜色、导航栏标题等。在项目中，它是特定于代码开发的项目配置。介绍几种配置：

页面：包含的页面。每次添加新的页面，都必须在这里介绍，否则新页面的json配置不会生效。请注意，页面首先被写入，然后在pages中首先呈现，因此数组中的第一项是我们的主页。

窗口：配置字体、颜色、背景色等。所有页面上导航栏的数量

App.js:小程序入口文件。生成一个applet实例，App({})，在这里通常可以获取用户信息、授权信息、定义全局变量等等。

app.wxss:小程序全局样式文件。对整个项目页面有效。通常指定项目的字体和基本颜色，并定义一些常见的样式。

Utils:工具功能目录。通常用来放一些公共的js方法。例如，封装的请求请求、其他一些处理数据的方法等。

pages:小程序的页面目录。所有的小程序页面都写在这里。

五是完善项目目录

小程序的基本文件，上面大致解释过了。现在按照通用规范，完善项目目录，里面有一些个人的意见，必要的时候可以参考。先看结果：

现在解释这些目录：

组件：我们打包的小程序的可重用组件。

常量：在某些项目中它总是打开的。

图像：使用的图像。

服务：使用的所有接口目录

大致来说，这些都是新建的。如果有其他需求，根据自己的情况增加。

不及物动词基础语法详解

现在大致解释一下小程序的语法。首先，创建新页面，默认都创建*.wxml * .wxss * .js * .数据和我们平时写的代码差不多，都是html js css，多了个数据配置文件

*.json:常用的属性有2大块，navigationBarTitleText相关的设置顶部标题的，使用组件引用的组件

*.js:getApp()获取小程序实例，拿全局变量等；页面({})创建页面；数据当前页面的变量；装载生命周期，页面加载完毕。

*.wxml:注意，小程序支持的标签很少，像跨度是支持的，div不支持，一般用视角代替块级、跨度、文本代替行级。

*.wxss:大部分钢性铸铁选择器不支持，支持的好像才5个，想支持较少的等得自己配置

//json文件{ ' navigationBarBackgroundColor ' : ' # fff '，' navigationBarTextStyle ' : ' black '，' navigationBarTitleText ' : '我的，使用组件： { '菜单' : '/组件/菜单/索引}}//js文件const app=GetApp()Page({ data : { }，onLoad: function () {}，})七、实现页面跳转

和通常的网开发一样，小程序页面跳转页分2中，wxml中的vavigator标签，以及射流研究…的领航员相关的api。路由跳转的方法有好几个，这里不一一赘述了，常用的直接跳转

wx.navigateTo，重定向wx.redirectTo等等，具体的请看官方文档。这里强调一下路由传参，很简单：1、少量数据。直接问号传参。然后在目标页面的装载方法中通过选择参数接收。2、大量数据。直接塞到全局变量里面。

//wxml跳转页面导航器URL='/pages/my { { item }。path } } ' class=' navigator ' image class=' imgIcon ' src=' http : { { item }。icon } } '/image view class=' navigator-text ' data-id=' { { item。key } }“bind tap=”handleMenuTap“{ item。name } }/view/navigator//js跳转页面wx。navigateto({ URL : `/页数/我的/约会详情/index？_ id=$ { this。数据。标记。id } ` })//路由传参如何接收onLoad:函数（选项){ console.log(选项)},八、wx.request的封装

在实用工具中新建request.js，简单封装了一下，一些数据要全局配置的都引进来，然后做了些错误的统一处理，没什么难度，不过要特别注意一下甜饼干的携带。具体代码如下：

const app=getApp()导出默认函数请求(网址，选项={}) {返回新的承诺(函数（解析，拒绝){ wx。请求({ URL : ` $ { app。origin } $ { URL } `，method: 'GET '，options，data: options.data，header : { ' content-type ' : ' application/JSON '，' cookie ' : wx。getstorageync(' cookie ')}，success:函数(res) { //重新授权登录if(RES . statuscode===401){ wx。redirectto({ URL : '/页面/登录/索引' })返回}else if (res.statusCode！==200) {拒绝({ error: '服务器忙，请稍后重试，代码： 500 });返回} else { if(URL=='/API/cdz/user/weixin/log in)){ const Cookie=RES . header[' Set-Cookie ']| | RES . header[' Set-Cookie ']；if(cookie)wx。setstorageync(' cookie '，cookie)；}解析(RES . data)；} }，fail:函数(res) { //失败调用接口失败if(URL==='/API/cdz/user/weixin/log in)){ const Cookie=RES . header[' Set-Cookie ']| | RES . header[' Set-Cookie ']；if(cookie)wx。setstorageync(' cookie '，cookie)；}拒绝({ error: '网络错误，代码： { 0 });} }) })}然后我们使用的时候直接使用封装好的请求方法，这样所有的美国石油学会(美国石油协会)就封装成一个个函数。我们在页面中直接进口引入调用即可。

从""导入请求./utils/request '；从""导入{ stringify }./utils/util ' export function TestPost(data){ return request(`/API/test/post `，{ method: 'PUT '，data，})} export function TestGet(data){ return request(`/API/test/get `)}九、使用npm(引入weui、moment等插件)

因为小程序使用不完整的浏览器对象，所以很多js包不容易使用，比如jquery。所以npm基本上已经过时了，可以使用的依赖包很少，哪些可以自己发现。这里我们还是要介绍一下如何通过小程序使用npm。毕竟有些包还是要用的。

1.打开微信开发者工具-点击详情-检查npm模块的使用情况

2.打开命令行，输入项目的根目录，npm init初始化npm

3、国家预防机制I .安装您需要的依赖项

4.打开微信开发者工具-点击工具-点击构建npm。此时，小程序将编译并打包node_modules文件，以生成一个新的目录miniprogram_npm。

5.在要使用的页面的js文件中，引入了const moment=require('moment ')，可以直接使用

6.最后记得忽略文件。创建新的。gitignore文件。node_modules、package_lock.json等文件不需要上传。最好只保留小程序的npm构建包，并根据需要下载。这是没有必要的

Ps:特别注重weui的引入。这个ui库是纯css的，没有js文件，所以他不能用npm介绍，而是直接下载文件。我直接把它扔到根目录，然后在app.wxss文件的开头介绍。

@ import ' weui.wxss，用这种方式

十、包装微信小程序可复用组件

现在有点太长了。再写一篇关于这个的文章。需要的话可以看。

XI。摘要

以上是我开发小程序的经验和总结，希望对大家有所帮助。另外我会把整个程序的骨架(删除的业务代码)上传到github，有需要的话再下载。记得赞一下，哈哈。

最后我会再写一篇关于如何打包小程序组件的博客，附上我在开发小程序时遇到的坑以及相应的解决方案。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。