来源： 【优化】小程序优化-代码篇 | 微信开放社区

前言

不知道大家有没有这种体会，刚到公司时，领导要你维护之前别人写的代码，你看着别人写的代码陷入了深深的思考：“这谁写的代码，这么残忍”

俗话说“不怕自己写代码，就怕改别人的代码”，一言不和就改到你吐血，所以为了别人好，也为了自己好，代码规范，从我做起。

项目目录结构

在开发之前，首先要明确你要做什么，不要一上来就是干，咱们先把项目结构搭好。一般来说，开发工具初始化的项目基本可以满足需求，如果你的项目比较复杂又有一定的结构的话就要考虑分好目录结构了，我的做法如下图：

• component文件夹是放自定义组件的
• pages放页面
• public放公共资源如样式表和公共图标
• units放各种公共api文件和封装的一些js文件
• config.js是配置文件

这么分已经足以满足我的需求，你可以根据自己的项目灵活拆分。

配置文件

我的项目中有个config.js，这个文件是用来配置项目中要用到的一些接口和其它私有字段，我们知道在开发时通常会有测试环境和正式环境，而测试环境跟正式环境的域名可能会不一样，如果不做好配置的话直接写死接口那等到上线的时候一个个改会非常麻烦，所以做好配置是必需的，文件大致如下：

首先是定义域名，然后在config对象里定义接口名称，getAPI(key)是获取接口方法，最后通过module暴露出去就可以了.引用的时候只要在页面引入 import domain from ‘…/…/config’;，然后wx.request的时候url的获取方式是domain.getAPI(’’)

代码健壮性、容错性

例子

代码的健壮性、容错性也是我们应该要考虑的一点，移动端的项目不像pc端的网络那么稳定，很多时候网络一不稳定就决定我们的项目是否能正常运行，而一个好的项目就一定要有良好的容错性，就是说在网络异常或其它因素导致我们的项目不能运行时程序要有一个友好的反馈，下面是一个网络请求的例子：

相信多数人请求的方式是这样，包括我以前刚接触小程序的时候也是这样写，这样写不是说不好，而是不太严谨，如果能够正常获取数据那还好，但是一旦请求出现错误那程序可以到此就没法运行下去了，有些比较好的会加上faill失败回调，但也只是请求失败时的判断，在请求成功到获取数据的这段流程内其实是还有一些需要我们判断的，一般我的做法是这样：

在请求成功后小程序会进行如下判断：

• 判断是否返回200，是则进行一下步操作，否则抛出错误
• 判断数据结构是否完整，是则进行一下步操作，否则抛出错误

然后就可以在页面根据情况进行相应的操作了。

定制错误提示码

可以看到上面的截图的错误打印后面会带一个gde0或gde1的英文代码，这个代码是干嘛用的呢，其实是用来报障的，当我们的小程序上线后可能会遇到一些用户发来的报障，一般是通过截图发给我们，之前没有做错误提示码的时候可能只是根据一句错误提示来定位错误，但是很多时候误提示语都是一样的，我们根本不知道是哪里错了，这样一来就不能很快的定位的错误，所以加上这样一个提示码，到时用户一发截图来，我们只要根据这个错误码就能很快的定位错误并解决了，错误提示码建议命名如下：

• 不宜过长，3个字母左右
• 唯一性
• 意义明确

像上面gde表示获取草稿失败，后面加上数字表示是哪一步出错。

模块化

我们组内的大神说过， 模块化的意义在义分治，不在于复用。
之前我以为模块化只是为了可以复用，其实不然，无论模块多么小也是可以模块化，哪怕只是一个简单的样式也一样，并是不为了复用，而是管理起来方便。
很多同学经常将一些公共的样式事js放在app.wxss和app.js里以便调用，这样做其实有一个坏处，就是维护性比较差，如果是比较小的项目还好，项目一大问题就来了。而且项目是会迭代的，不可能总是一个人开发，可能后面会交接给其他人开发，所以会造成的问题就是：

• app.wxss和app.js里的内容只会越来越多，因为别人不确定哪些是没用的也不敢删，只能往里加东西，造成文件臃肿，不利于维护。
• app.wxss和app.js对于每个页面都有效，可读性方面比较差。

所以模块化的意义就出来了，将公共的部分进行模块化统一管理，也便于维护。

样式模块化

公共样式根据上面的目录结构我是放在public里的css里，每个文件命名好说明是哪个部分的模块化，比如下面这个就表示一个按钮的模块化

前面说过模块化不在于大小，就算只是一个简单的样式也可以进行模块化，只要在用到的地方import一下就行了，就知道哪里有用到，哪里没有用到，清晰明了。

js模块化

js模块化这里分为两个部分的模块化，一部分是公共js的模块化，另一部分是页面js的模块化即业务与数据的拆分。

公共js模块化

比较常用的公共js有微信登录，弹窗，请求等，一般我是放在units文件夹里，这里经微信弹窗api为例：

如图是在小程序中经常会用到的弹窗提示，这里进行封装，定义变量，只要在页面中引入就能直接调用了，不用每次都写一大串。比如在请求的时候是这样用的

toast()就是封装的弹窗api，这样看起来是不是清爽多了！

业务与数据模块化

业务与数据模块化就是指业务和数据分开，互不影响，业务只负责业务，数据只负责数据，可以看到页面会比普通的页面多了一个api.js

这个文件主要就是用来获取数据的，而index.js主要用来处理数据，这样分工明确，相比以往获取数据和处理数据都在一个页面要好很多，而且我这里获取数据是返回一个promise对象的，也方便处理一些异步操作。

组件化

组件化相信大家都不陌生了，自从小程序支持自定义组件，可以说是大大地提高了开发效率，我们可以将一些公共的部分进行组件化，这部分就不详细介绍，大家可以去看文档。组件化对于我们的项目来说有很大的好处，而且组件化的可移植性强，从一个项目复用到另一个项目基本不需要做什么改动。

总结

这篇文章通过我自己的一些经验来给大家介绍如何优化自己的代码，主要有以下几点

• 分好项目目录结构
• 做好接口配置文件
• 代码健壮性、容错性的处理
• 定制错误提示码方便定位错误
• 样式模块化和js模块化
• 组件化

最后放上项目目录结构的代码片段，大家可以研究一下，有问题一起探讨：https://developers.weixin.qq.com/s/1uVHRDmT7j6l

来源： 微信小程序数组操作find，filter查找特定值 – 掘金

// 定义一个需要被查找的数组
var memoList = [{ id: 1, name:  '1'},
                   {id: 2, name:  '2'},
                   {id: 3, name:  '3'}]

// 用 editItem 变量将 查找出来的数据进行接收`

var` `editItem = memoList.find((ele) => {
                        return  ele.id == 2
                        })   

// 打印 editItem 得到的结果是 {id: 2, name: '2'}
复制代码

  let test = [1, 2, 3, 4, 5];
        let a = test.find(item => item > 3);
        console.log(a); //4

let b = test.find(item => item == 0);
        console.log(b); //undefined
复制代码

 let game = getGameListData.data.data.find(item=>{
    return item.gamename.indexOf(this.data.searchInfo) !==-1
  })
复制代码

var arr = ['A', 'B', 'C'];\
var r = arr.filter(function (element, index, self) {undefined\
    console.log(element); // 依次打印'A', 'B', 'C'\
    console.log(index); // 依次打印0, 1, 2\
    console.log(self); // self就是变量arr\
    return true;\
});
复制代码

    let filterNum = searchInputInfo.filter(item=>{
      return item.name.indexOf(searchInfo) !==-1
    })
复制代码

var a=11,
arr=[11,22,33]
arr.map(function(elem,index,array){
    if(elem==a){
        console.log(elem);
    }
})
复制代码

来源： 微信小程序Cannot read property ‘setData‘ of undefined，that=this_纳萨斯瓦德的博客-CSDN博客

问题：Cannot read property ‘setData’ of undefined

原因分析：在wx.request({});方法的回调函数中，有时候需要使用this.setData将拿到的数据给到data中。在JavaScript中，this代表着当前对象，而在在wx.request({});方法的回调函数中，对象已经发生改变，this已经不是wx.request({});方法对象了，data属性也不复存在.

解决办法：在wx.request({});方法外复制一份this对象赋给that,在回调函数中使用that来代替this

onLoad: function () {
var that = this//这里就是解决办法
wx.request({
url: ‘https://miniapp.sjw2l3.com/test’,
method: ‘GET’,
data: {
},
success :(res)=> {
// console.log(res.data)
//使用that给data里面的数组赋值
that.setData({
localdata:res.data
})
console.log(this.data.localdata)
}
})
}

————————————————
版权声明：本文为CSDN博主「纳萨斯瓦德」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43922093/article/details/108428716

来源： WordPress网站宝塔启用Redis配置缓存加速，提升网站打开速度。_红客科技的博客-CSDN博客_宝塔使用redis

WordPress功能很强大，但是性能确实比较慢， WordPress采用的是动态数据库查询技术。通俗的说，就是用户访问每篇文章或页面，都会向数据库发送一条查询命令，数据库根据命令查询之后，返回查询结果（这个结果不考虑任何缓存技术）。显然，如果访问量大的时候，会出现频繁的查询。所以这会减慢网站速度。如果服务器性能不高，瞬间网站就崩溃了。

所以需要一种技术，来减少数据库查询次数。而数据库缓存技术就是其中之一。Redis技术是其中的佼佼者。Redis是key-value分布式存储系统。简单的说，就是根据关键词值进行查询，这在很大程度上弥补了Memcached的短板。通过Redis进行数据库缓存，查询速度会更快，并发数更多。

本次教程使用宝塔面板，后台的软件管理里面就可以直接安装Redis，不用去ssh下面敲命令来下载安装，提供的这种方法，更适合小白，毕竟谁都不是大神，用最简单的方法，让我们的博客变的飞起来，那何乐而不为呢。

第一：安装Redis扩展

安装过程也是很快的，稍等会安装好了，Redis是一个高级的key-value存储系统，类似memcached，所有内容都存在内存中，因此每秒钟可以超过10万次GET操作。如果流量很大的站我们可以用在redis缓存来解决流量太大给服务器带来的压力。

wordpress安装Redis缓存教程
请勿安装同等类型的内存缓存。比如Memcached，可能会出现冲突。

宝塔面板安装Redis缓存插件
面板 – 软件商店 – PHP – 设置 – 安装扩展 – redis
wordpress安装“Redis Object Cache”
WP后台 – 插件 – 安装插件 – 搜“Redis Object Cache”安装并启用
网站根目录wp-config.php中增加：
define( ‘WP_CACHE_KEY_SALT’, ‘Redis123’ );

Redis123为任意字符，推荐以你的数据库名称，并且如果一个网站有多个WordPress使用Redis的话，需要每个网站设置的Redis123都不同。

配置redis插件
WP后台 – 设置 – Redis – Enable Object Cache 。
Status显示为 Connected 代表插件启用成功。

测试Redis缓存效果
随便打开前台几个页面。然后到宝塔面板查看 面板 – 软件商店 – Redis – 设置 – 负载状态。

比如：hit 90.91 （该数值随着使用会不断增高）

缓存命中率非常高。提高网站服务器几个数量级的性能。

打开网站首页右键查看源码，拉到最底部也能看到开启Redis情况。

开启Redis后打开网站SQL查询可以减少一半，比如用日主题搭建资源站，开启Redis后打开主页SQL查询在70左右。不开启正常在140左右，打开网站首页速度非常慢。

新手不开启Redis密码等其他参数设置，宝塔里面安装完Redis和网站安装好插件开启就行。

WordPress网站宝塔启用Redis配置缓存加速，提升网站打开速度。 – 红客科技
————————————————
版权声明：本文为CSDN博主「红客科技」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weizuer123/article/details/126324108

1.路由跳转
微信小程序的路由跳转 是通过两个栈堆实现的,这就导致了栈堆里最多储存十个页面,如果超过十个,会直接报错,所以要在必要的时候清空栈堆。

wx.navigateTo:最常用的跳转,跳转到另一个页面，并把当前页面存在栈堆里,缺点是会有十个限制,优点是回退的时候非常顺滑,页面直接联系紧密或者非常繁杂的页面跳转的时候推荐使用。

wx.switchTab:跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面,清空栈堆的方法之一,但局限性比较大。

wx.reLaunch：关闭所有的页面,打开到应用内的某个页面,清空栈堆的方法之一，可以一次性清空所有栈堆，但是二次加载的时候没有wx.navigateTo顺滑，非常影响体验。

wx.redirectTo：关闭当前页面,跳转到指定的某个页面，也是清栈堆的方法之一，页面联系的不紧密，不需要用户返回页面可以使用。一般来说可以用这个解决掉页面之间交互频繁栈堆爆满的问题。

wx.navigateBack：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层,跟wx.redirectTo的区别在于他只会跳到页面栈里有的栈，常用返回，非常好用，很简单解决双页面频繁交互问题。

顺带一提，页面传参：
当只有单个数据的时候：

var id=2
wx.navigateTo({
url: ‘/packageWF/estimate/estimate?id=’+id,
})

接收：

onLoad: function (options) {
this.setData({
sign:options.id
})
},

如果你传的值是boolena，int等数据都会被转换成字符串，接收的时候记得转换。

如果有大量数据的时候，创建一个对象，塞到对象里，使用JSON.stringify()转换成字符串发过去

wx.redirectTo({
url: ‘/package/ClockIn/Diet?tlist=’+JSON.stringify(this.data.tlist)
})

接收同理 用JSON.parse()转换拆出来就好。
————————————————
版权声明：本文为CSDN博主「Tx的练习题」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/txtop/article/details/123354253

解决办法：

当小程序访问微信服务器的时候，微信服务器再访问我们的后台，最后在返回的报文里有微信服务器给小程序的sessionId,我们将这个sessionId进行利用微信小程序进行本地存储，当小程序在请求我们后台的接口的时候就能对比上了。

操作步骤：

①：找到返回的报文里sessionId数据

②：把这个Set-Cookie的值进行本地存储localstroage或者存储到一个全局变量里，以便后边调用。

       需要注意的是，在把Set-Cookie进行本地存储时，一定要先清除。

1. // 请求成功响应的回调
2. success: (result) => {
3. //清除sessionId，否则res.header['Set-Cookie']会报错
4. wx.removeStorageSync('sessionid');
5. wx.setStorageSync("sessionid", result.header["Set-Cookie"]);
6. }

设置成功之后，就会在本地存储中显示。

③：最后一步，在进行页面的请求时，在请求头header里加上你存储的这个Set-Cookie的值。

普通的Web开发，都是把sessionid保存在cookie中传递的。
不管是java还是php，服务端的会在response的header中加上Set-Cookie

Response Headers
Content-Type:application/json;charset=UTF-8
Date:Mon, 02 Apr 2018 16:02:42 GMT
Set-Cookie:JSESSIONID=781C7F500DFA24D663BA243A4D9044BC;path=/yht;HttpOnly
浏览器的请求也会在header中加上

Request Headers
Accept:/
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:564
content-type:application/json
Cookie:JSESSIONID=781C7F500DFA24D663BA243A4D9044BC;path=/yht;HttpOnly
通过这个sessionid就能使浏览器端和服务端保持会话，使浏览器端保持登录状态

但是，微信小程序不能保存Cookie，导致每次wx.request到服务端都会创建一个新的会话，小程序端就不能保持登录状态了

简单的处理方法如下：

1、把服务端response的Set-Cookie中的值保存到Storage中

wx.request({
url: path,
method:method,
header: header,
data:data,
success:function(res){
if(res && res.header && res.header['Set-Cookie']){
wx.setStorageSync('cookieKey', res.header['Set-Cookie']);//保存Cookie到Storage
}
},
fail:fail
})

wx.request再从Storage中取出Cookie,封装到header中

let cookie = wx.getStorageSync('cookieKey');
let path=conf.baseurl+url;
let header = { };
if(cookie){
header.Cookie=cookie;
}
 
wx.request({
url: path,
method:method,
header: header,
data:data,
success:success,
fail:fail
})

解决小程序请求接口时sessionId变化问题

需求：想把登录用户的信息存放在session中，以方便后续的使用（判断是否在登陆状态，获取用户信息…）。

问题描述：但是每次微信小程序请求的时候都会改变sessionid，这就会导致登录成功时存放在session中的信息无法得到。

我们只需要把登陆成功时的sessionid存放起来，在每次请求时再传回去即可。
①、首次请求成功时，在程序端添加
wx.setStorageSync(“cookieKey”, res.header[“Set-Cookie”]);
②、后续再请求时，在header中添加
‘Cookie’: wx.getStorageSync(‘cookieKey’);

小案例如下：

1、首次登录请求成功时，添加一句：

wx.setStorageSync(“cookieKey”, res.header[“Set-Cookie”]);
1
res代表的是请求成功时接收的参数名；其他不做修改。

success: function (res)
1
具体如下：

wx.request({
url: ‘http://localhost:8080/login/user’,
method: “POST”,
data: {
phone: that.data.phone,
password: that.data.password
},
header: {
‘content-type’: ‘application/x-www-form-urlencoded’
},
success: function (res) { //接受后台的回调函数
var resData = res;
console.log(resData);
//不是error代表登录成功
if (resData != “error”) {
wx.setStorageSync(“cookieKey”, res.header[“Set-Cookie”]);

2、此后的每次请求接口时，在header中添加：

‘Cookie’: wx.getStorageSync(‘cookieKey’);
1
具体如下：

header:{
‘content-type’ : ‘application/x-www-form-urlencoded’,
‘Cookie’: wx.getStorageSync(‘cookieKey’)
},

如上即可。

后端获取cookie值，可以通过HttpServletrequest 中的getHeader(“Cookie”);来获取。
————————————————
版权声明：本文为CSDN博主「Ant-安特」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_44952181/article/details/125005655

来源： TP框架session会话处理机制 – 简书

默认情况下，初始化之后系统会自动启动session，如果不希望系统自动启动session的话，可以在TP的CONFIG.PHP文件中设置：

'SESSION_AUTO_START' =>false

框架自动处理session会获取$_COOKIE[‘PHPSESSID’]作为本次会话的ID识别会话并自动初始化session(使用CONFIG.PHP文件中配置参数数组), 之后会话中的key_value存储与读取都是基于这次同一ID的会话, 如果SESSION_AUTO_START为FALSE时需要进行本次会话的手动初始化。

手动初始化会话, 可以在项目的公共文件或者在控制器中通过手动调用助手函数session_start()、session(‘[start]’) 或者框架封装的SESSION操作类, 并传入初始化参数数组, 来启动session。

初始化的参数:

图片.png

初始化:

//TP5的初始化方法
 Session::init(['id' => $session_id, 'prefix'=> 'hyappMS_']);
 Session::start();

//助手函数的初始化方法  TP3.2 5通用
session(['id' => $session_id, 'prefix'=> 'hyappMS_']);
session_start();

后话:

一般来说, 只有TP框架作为小程序的接口提供端才需要进行session的手动初始化, 因为小程序不允许操作cookie, 行内通用的解决方法是将后端登录时返回的SESSION_ID存储在缓存中, 并在请求头中增加一个SESSION_ID的请求头携带缓存中的数据, 后端获取请求头来识别是否小程序内的访问, 如果是使用此SESSION_ID内容来初始化会话。

作者：LittleTrue
链接：https://www.jianshu.com/p/7e138490df8b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

来源： PHP SESSION PHPSESSID session_id()_alexander_phper的博客-CSDN博客

PHPSESSID生成
生成规则是根据hash_func散列来生成的，相关的参数有：
– 客户端IP
– 当前时间（秒）
– 当前时间（微妙）
– PHP自带的随机数生产器

hash_func是phpinfo中的session.hash_function配置。如下：

; Select a hash function for use in generating session ids.
; Possible Values
; 0 (MD5 128 bits)
; 1 (SHA-1 160 bits)
; This option may also be set to the name of any hash function supported by
; the hash extension. A list of available hashes is returned by the hash_algos()
; function.
; http://php.net/session.hash-function
session.hash_function=0

PHP session工作原理
以下以cookie传输PHPSESSID描述。
1. 客户端请求一个php的服务端地址。
2. 服务端收到请求，此次php脚本中包含session_start()。
3. 服务端会生成一个PHPSESSID。（默认session存储方式为session.save_handler=files，文件形式存储。生成的session文件名规则即为sess_PHPSESSID，session文件存在session.save_path中。）
4. 服务端响应首部Response Headers：Set-Cookie:PHPSESSID=37vjjasgjdv2ouk1uomhgqkv50; path=/。在客户端生成一个cookie保存此PHPSESSID。
5. 此时，客户端的cookie里面包含了PHPSESSID，之后客户端的每次请求首部Request Headers：Cookie:PHPSESSID=37vjjasgjdv2ouk1uomhgqkv50。服务端之后每次接收到客户端的请求就都能根据这个PHPSESSID来找到服务端的session文件，通过对这个session文件的读写操作即实现了session的超全局变量属性。

如果客户端禁用了cookie，由于无法使用cookie传递PHPSESSID，那么客户端每次请求，服务端都会重新建立一个session文件，而无法通过通过PHPSESSID来重用session文件，所以session也就失效了。
这种情况可以设置session.use_trans_sid来传输PHPSESSID，具体实现方式与cookie的区别就是将PHPSESSID通过HTTP的GET传输。每次请求的地址里面都会补全PHPSESSID参数”url?PHPSESSID=37vjjasgjdv2ouk1uomhgqkv50”来实现。

PHPcli模式通过session_id()使用session
官网说明
可以通过它来获取当前会话的PHPSESSID，也可以通过它来设置当前的会话PHPSESSID。
PHPcli模式下可以通过设置这个，达到使用session的目的，非常方便。
例如：

<?php
// session_id(‘vingbrv8m64asth0nhplu9gmb7’);
session_start();
$_SESSION[md5(rand(100,999))] = rand(100,999);
var_dump($_SESSION);

未使用session_id()的时候，在cli模式下运营此php脚本三次：

可以看到由于cli模式下没有传输PHPSESSID，所以每次都是一次性的session使用。session没有生效。
查看下session文件：

这三个session文件是我们三次cli执行生成的。三个session文件的内容如下：

将之前的session文件删除掉，然后如果我们使用session_id()，为cli脚本设定固定的PHPSESSID。

<?php
session_id(‘vingbrv8m64asth0nhplu9gmb7’);
session_start();
$_SESSION[md5(rand(100,999))] = rand(100,999);
var_dump($_SESSION);

然后cli运行脚本三次：

再查看下session文件，就只有一个我们设置的session文件：

文件内容：

这样，在PHPcli模式下，session就可以使用了。
session_id()的作用简略说，即为PHP脚本自己设定了PHPSESSID，而不需要传输PHPSESSID。
另外，cli模式下，session可以使用，apache的ab测试，session也就可以使用了。
————————————————
版权声明：本文为CSDN博主「alexander_phper」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/alexander_phper/article/details/52670608