微信小程序开发的配置方法及应用场景详解

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信小程序开发的配置方法及应用场景详解

微信小程序大家都很熟悉，现在的应用场景也很多。 今天我就系统的介绍一下小程序的开发。 注意，这里只分析项目代码微信小程序开发的配置方法及应用场景详解，不涉及如何申请、打包、发布小程序。 （按照微信官方文档流程即可）。 好了，话不多说，让我们看一下目录。

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

2. 如何创建小程序

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

注意，正式的小程序需要经过审批，并获得正式的APPID。 如果我们正在测试它或还没有它，我们可以单击该测试 appid。 只需选择默认的小程序模板即可。 按照这个流程，我们将创建一个小程序。

三、支持小程序开发

创建完小程序后，我们就不用担心开发它了。 工欲善其事，必先利其器。 微信开发工具有点卡，功能少，开发效率低。 因此，我们应该改革我们的编译器。 这里仅介绍两种方法。 一是它有一个支持小程序模块和一个非常小的编译器； 另一个是我用的。 配置方法就介绍到这里，其他的可以自行一下。

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

2.支持小程序代码提醒。 下载此文件并将其放在显眼的地方； 然后微信小程序开发方案，单击“文件”-“导入设置”，找到下载的文件，然后单击“确定”。

这就是小程序语法的支持方式。

4.基本文件目录详解

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

。 。 js：小程序的配置文件，包括项目打包配置、上传代码自动压缩等。只是一些开发、打包等配置。

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

页面：包含的页面。 每次添加新页面时，必须在此处引入，否则新页面的json配置不会生效。 请注意，页面首先写入，然后在页面内首先渲染，因此数组中的**项是我们的主页。

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

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

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

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

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

五是完善项目目录

上面大致介绍了小程序的基本文件。 现在我们正在按照通用规范完善项目目录。 里面有一些个人观点，有需要的时候可以参考一下。 我们先看一下结果：

现在解释一下这些目录：

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

常亮：在某些项目中它始终打开。

图像：要使用的图像。

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

粗略地说，这些都是新建的。 如果还有其他需求，可以根据自己的情况添加。

不及物动词基本语法详解

下面简单介绍一下小程序的语法。首先，新建一个页面。 默认情况下，创建 *.wxml * .wxss * .js *。 数据和我们平时写的代码类似。 它们都是html js css。 还有一个附加的数据配置文件。

*.json：常用的属性有两个，顶部标题的xt相关设置，组件引用的组件。

*.js:() 获取小程序实例、获取全局变量等； page ({}) 创建一个页面； 当前页面的数据变量； 在生命周期中，页面被加载。

*.wxml：注意小程序支持的标签很少，比如span，但不支持div。 一般用透视来代替块级、跨度，用文本来代替行级。

*.wxss：不支持大多数刚性铸铁选择器。 好像只支持5个。 如果您想支持更少的选择器，则必须自己配置它们。

//json 文件 { ' ' : ' # fff ', ' le ' : ' black ', ' xt ' : ' 我的，使用组件: { 'menu' : '//menu/index}} //js 文件 const app=()Page({ data : { }, : () {}, }) 7.实现页面跳转

和平时的web开发一样，小程序页面跳转页面分为2个，wxml中的标签，还有Jet 的导航器相关的API……路由跳转有几种方法。 我这里就不详细说了。 *常用的是直接跳转。

wx.、重定向wx.等，具体请查看官方文档。 这里强调一下路由参数，很简单： 1.数据量小。 直接传问号参数。 然后通过目标页面的load方法中的参数接收。 2.数据量大。 直接将其填充到全局变量中。

//wxml跳转页面导航器URL='/pages/my { { item }. 路径 } } ' 图像 src=' http : { { item }. 图标 } } '/image view data-id=' { { item. key } }"bind tap=""{ item.name } }/view///js跳转页面 wx.({ URL: `/页码/我的/预约详情/index?_ id=$ { this.data. tag.id } ` })//如何接收路由参数： () { .log ()}, 8.wx.tag.id } ` })//如何接收路由参数： () { .log ()},

在实用工具中新建一个.js文件，简单封装一下，导入一些需要全局配置的数据，然后做一些错误的统一处理。 并不难，但是糖饼干的携带一定要特别注意。 具体代码如下：

const app=() 导出默认函数 (url, ={}) { new ((,) { wx.({ URL: ` $ { app. } $ { URL } `,: ' GET ',, data: .data, : { ' -type ' : ' /JSON ', ' ' : wx.(' ')}, : (res) { //重新授权登录 if(RES . == =401 ){ wx.({ URL : '/Page/Login/Index' })}else if (res.!==200) {({ error: '服务器繁忙，请稍后再试，代码: 500 });} else { if(URL=='/API/cdz/user//登录)){ const =RES .['Set-']| | RES .['Set-']; if( ) wx.(' ',); } (RES . data); } }, : (res) { //调用接口失败 if (URL==='/API/cdz/user//登录)){ 常量 =RES 。 ['设置-']| | RES。 [' 放- ']; if()wx. ('',); }({ error: '网络错误，代码：{ 0 });} }) })} 然后我们在使用的时候直接使用封装好的请求方法，这样就将所有的美国石油协会（US ）都封装成函数了。 我们可以直接导入并在页面中调用。

从“”./utils/'导入请求； 导入{} ./utils/util'（数据）{（`/API/test/post`，{：'PUT'，数据，}）}（数据）{（`/API/test/get`）} 9 .使用npm（引入weui，其他插件）

由于小程序使用的浏览器对象不完整，导致很多js包不好用，比如。 所以npm基本已经过时了，能用的依赖包很少，大家可以自己发现有哪些。 这里还是想介绍一下如何通过小程序来使用npm。 毕竟有些包还是需要用的。

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

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

三、国家防范机制一、安装你需要的依赖

4.打开微信开发工具-点击工具-点击构建npm。 此时，小程序会对文件进行编译打包，生成新的目录。

5、要使用的页面的js文件中引入const =(' ')，可以直接使用

6.*后记得忽略该文件。 创建新的。 文档。 、.json等文件不需要上传。 *好只保留小程序的npm构建包，根据需要下载。这个不是必须的

PS：特别注意weiui的介绍。 这个ui库是纯css的，没有js文件，所以无法使用npm引入，而是直接下载文件。 我只是把它扔到根目录并在app.wxss文件的开头引入它。

@'weui.wxss，这样

10、封装微信小程序可复用组件

现在有点太长了。 就此再写一篇文章。 如果需要的话您可以观看。

十一、总结

以上就是我开发小程序的经验和总结。 希望对大家有所帮助。 另外，我会把整个程序的骨架（删除的业务代码）上传到，如果需要的话可以下载。 记得点赞哦，哈哈

*后我会再写一篇关于如何封装小程序组件的博客，并附上我在开发小程序时遇到的陷阱以及相应的解决方案。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等