微信的发展影响了我们生活的方方面面，从一开始的社交聊天到如今的各种便捷服务。例如：微信扫描（不仅限于QR码，还扫描条形码以识别产品，检查在线价格和快速在线购物），微信搜索，微信公众号，微信小程序等..
这一次，我接触了微信小程序，并试图将小程序设置为商城。以下是项目开发的步骤，这次主要从项目结构目录，全局配置和商城指南页面进行共享。
第一张图片
创建一个新的小程序并生成一个目录，如图1所示。pages文件主要存储小程序的页面文件。每个文件夹是一个页面，每个页面包含四个文件（单页文件以index为例，该文件包含四个文件：index.js，index.json，index.wxml，index.wxss）。 utils文件用于存储全局js文件，并且可以将供公众使用的事件处理代码放在此文件夹中，以方便后续的页面调用。 app.js是处理全局文件（即文件中指定的功能和数据）的系统方法。整体小程序，可以使用此获取每个帧页面和文件。 App.json是系统全局配置文件，包括设置页面路径，设置底部，网络，调试模式，设置导航标题的颜色，字体大小以及下面是否有标签栏。 App.wxss是全局样式表，类似于css文件中常用的全局样式reset.css。 project.config.json是项目的配置文件。
全局配置，主要反映在app.js和app.json中。 app.js中使用的主要事件是onlaunch，该事件用于监视初始化后要触发的小程序。打开小程序时，将执行获取商城名称，获取用户信息，用户登录名和本地存储的过程。 微信提供了丰富的API来简化开发步骤。最常用的是wx.request（），类似于ajax，用于前后之间的数据交互。通过调用接口wx.login（）获得临时登录凭据（代码）；简化步骤如下：
onLaunch: function() {wx.login({ success: function(res) { if (res.code) { //发起网络请求 wx.request({ url: '微信登录的接口', data: { code: res.code } })success: function (res) { if (res.data.code == 10000) { // 调用注册方法 that.registerUser(); return; } if (res.data.code != 0) { // 登录错误 wx.hideLoading(); wx.showModal({ title: '提示', content: '无法登录，请重试', showCancel: false }) return; } //console.log(res.data.data) that.globalData.token = res.data.data.token; that.globalData.uid = res.data.data.uid; } } else { console.log('登录失败！' + res.errMsg) } } }); }
其中，红色的globalDat是全局变量，可以在页面文件夹下的任何页面中调用它，
存储方式：
globalData: { userInfo: null, subDomain: "b16a7808b6a4205a089400a9d778d4f6", version: "2.0"}
调用方法如下：
//获取应用实例const app = getApp()var info = app.globalData.userInfo
图2
指南页面的屏幕截图如图2所示。从页面背景中获得的信息是产品名称和用户个人资料图片。对于主页，将文件夹名称定义为index并将其放置在pages文件夹中。为了方便配置，其子目录名为index.wxml，index.wxss，index.js，index.json。要添加页面，您需要将其添加到app.json中，例如：
"pages":["pages/index/index", //引导页...],
以下是index.wxml页面框架代码：
进入店铺
代码使用{{}}完成数据绑定。数据来自index.js，还使用了条件渲染和单击事件。使用wx：if =“ {{show}}”确定是否需要渲染代码块，如果show为true，则显示它，否则将其隐藏。它具有与隐藏相同的功能，但是它们之间存在差异。 wx：if在隐藏时不呈现，而hidden在隐藏时仍呈现，但不呈现。因此，在频繁切换时使用hidden，在偶尔切换时使用wx：if。 Bindtab是单击事件。单击此元素后，将触发toStore方法。
在开发过程中，不可避免地会遇到一些问题。在此过程中，发现样式文件中使用了background-images：url（本地图像路径地址）。它不会显示在视图层中。解决方案：改用网络 url或base64，或者添加不带背景图像的图像，请使用图像标签。
以上是商城小程序开发全局配置和指南页面制作的全部内容，待续。