业务需要从后端返回数据，全局使用。

第一时间想到了uniapp 有没有跟 原生小程序一样的 全局变量 globalData

官网是有的，并且给出了重新赋值的方法。

如上图

于是我就按照官网的方式试了一下。

我在App.vue 定义 globalData.version = 1.0.10， 后端返回的是1.0.14

发现第一次进入并没有更新 version 的值，在第二次进入小程序才更新为 1.0.14

于是尝试换方法， 使用this.$set()

这样就可以了。每次进入小程序都可以将 globalData.version 更新为后端传来的值。

前言

书接上回 tailwindcss 小程序定制化之旅

我们知道 uni-app 和 tarojs 在最终打包成小程序运行的时候，都是使用的 webpack，所以在这 2 个框架中，我们可以使用 *-loader 轻而易举的赋予它们这方面的能力。

但是，假如我们使用的是原生开发呢？

原生开发的选项

使用微信开发工具的小伙伴们，肯定注意到，在 项目详情 -> 本地设置 中,

有上传代码时 样式自动补全,自动压缩样式, 自动压缩混淆 等等选项。

它们的本质，不过是几个插件罢了:

样式自动补全 -> autoprefixer

自动压缩样式 -> cssnano

自动压缩混淆 -> uglify-js/terser

所以我们完全可以自定义，以获得更强更自由的能力。

最小化的自定义样式工具链

1. Scss与Postcss支持

我们知道 在 webpack 里 sass-loader, postcss-loader ,babel-loader 这类，只是编译核心们和 webpack 做粘合的胶水代码。

在不使用 webpack gulp rollup ... 这类的打包工具的情况下，我们当然可以去自定义一个最小化的样式编译工具。

首先，直接安装 dart-sass,和 postcss

yarn add -D sass postcss

安装后，可以看到 , sass 渲染函数签名

// sass函数签名  
export function render(options: Options, callback: (exception: SassException, result: Result) => void): void;  
export function renderSync(options: Options): Result;

然后我们又知道 webpack 的 loader 选择了 compose 方式的执行方式。

函数式编程中, compose 从右到左执行, pipe 从左到右执行

于是我们知道了执行顺序，那么就可以确定 *.scss 文件，先交给 sass 处理，再交由 postcss 处理, 然后就直接打成 xxpage.wxss 这类 局部页面样式 , 又或者打成 app.wxss 作为全局样式。

那么写代码实现就是探囊取物了：

// 不考虑 preset merge的情况下  
const sass = require('sass')  
const postcss = require('postcss')  
const { plugins } = require('./postcss.config.js')  
function handleScss (path) {  
  sass.render({  
    file: path,  
    // fiber: Fiber  
  }, (err, result) => {  
    if (err) {  
      console.error(err)  
    }  
    const destPath = path.replace(/\.scss$/, '.wxss')  
    postcss(plugins).process(result.css, {  
      from: path,  
      to: destPath  
    }).then(result => {  
      fs.writeFile(destPath, result.css, () => true)  
      if (result.map) {  
        fs.writeFile(destPath + '.map', result.map.toString(), () => true)  
      }  
    })  
  })  
}

上面这段代码就是 scss -> postcss -> wxss 的转化链路

而且还可以在里面，随意的装 postcss plugin , 比如 autoprefixer , cssnano , tailwindcss 之前笔者写的 tailwindcss-miniprogram-preset 也可以无缝的嵌入这套机制中去，给原生小程序使用。

2. 文件监控

我们开发的时候，会经常去创建，修改，删除文件，这么获取到这些 timing 对文件进行重新编译呢？

fs.watch，fs.watchFile 固然可以，不过更推荐的还是 chokidar

yarn add -D chokidar

在 chokidar 的 README.md 中详细介绍了它的优势，这里不再叙述。

const watcher = chokidar.watch(`${someGlob}`, {  
  ignored: /(^|[\/\\])\../,   
  persistent: true  
})  
// EventEmitter 的写法,把监控安排的明明白白  
watcher  
  .on('add', (path,stats) => {  
    // 添加文件  
  })  
  .on('change', (path,stats) => {  
    // 修改文件  
  })  
  .on('unlink', (path,stats) => {  
    // 删除文件  
  })  
  .on('error', error => {  
    // 发生错误  
  })  
  .on('ready', () => {  
    // watch ready after add files  
  })  

通过 watcher 的持续性监控，我们可以很容易得出结论,我们需要在 *.scss 文件变动的时候，重新编译，
即 add,change 的时间点, 在 unlink 的时间点，也要同时 unlink 对应的 *.wxss 文件。

假如 purgecss 开启，则需要在 wxml 文件发生变更时,通知重新编译 app.scss 和文件对应的 page.scss,一般开发时不开启此工具。

3. IDE智能提示设置

前面这一套机制，搭建完成后

在 app.scss 里加一行 @tailwind utilities; 就可以顺利使用 tailwindcss 了

但是我们需要我们的编辑器根据 tailwindcss 配置，自动生成 class 的智能提示怎么做呢？

这里我们以 vscode 为例:

1. 安装 WXML - Language Services 插件(一搜wxml下载量最多的就是了)

2. 安装 Tailwind CSS IntelliSense 插件

接着找到 Tailwind CSS IntelliSense 的 扩展设置

在 include languages,手动标记 wxml 的类型为 html

智能提示就出来了:

是不是非常方便，同时也能大大提升开发效率。

代码工程化方案

其实这篇文章，拆开了 webpack 的部分黑盒， 探讨了场景定制化的代码加工生产线，以期来帮助开发者提升效率。

typescript + @babel/core + rollup 这种处理js的组合也见过。

只要能提升开发者生产效率，提升开发体验，提升可维护性的工具还是值得一做的。

附录

源代码

技术无罪，业务有罪。近段时间，程序员被抓甚至被判刑的新闻层出不穷，究竟程序员该如何避免“程序监狱”？

程序员获罪新闻层出不穷

1.某大数据科技公司因为涉嫌非法抓取某招聘网站用户的简历信息，公司被查封，200人被扣留调查，负责编写抓取程序的程序员也将面临坐牢。

2.1亿条个人信息遭泄漏，拉卡拉旗下考拉征信被查。考拉征信从上游公司获取接口后又违规将查询接口出卖，并非法缓存公民个人身份信息，供下游公司查询牟利，从而造成公民身份信息包括身份证照片的大量泄露。

3.某程序员因为接了个外包，帮别人写了个软件，结果这个软件被用于赌博导致被抓。

4.某公司利用爬虫抓取用户信息，最后被发现，导致该公司的程序员被抓。

5.某P2P公司暴雷，老板跑路，程序员被抓。

6.中科大博士卖“外挂”非法牟利300多万，被警方逮捕。

......

从上面的种种新闻可以看出，程序员获罪主要因为两点：公司业务以及个人行为。

如何识别公司业务是否违法？

爬虫，是互联网时代一项普遍运用的网络信息搜集技术。该项技术最早应用于搜索引擎领域，是搜索引擎获取数据来源的支撑性技术之一。

随着数据资源的爆炸式增长，网络爬虫的应用场景和商业模式变得更加广泛和多样，较为常见的有新闻平台的内容汇聚和生成、电子商务平台的价格对比功能、基于气象数据的天气预报应用等等。

而现在越来越多的公司利用爬虫技术谋取利益，作为一名程序员，虽然阻止不了老板以及公司的违法行为，但是自己的心里要有那把称，违法的事情不碰是一个人的基本生存原则。下面小编给你列出几种主要的公司业务违法行为。

1.经营博彩，se情等违法网站的公司，请立即远离。

这种业务类型的公司，本质上已经违法了我国的法律，如果程序员还继续坚持为这类公司工作，就构成了知法犯法，一定要负刑事责任，只有离职这一条路可以避开被抓。

但是这种业务在国外是不违法的，所以很多公司在国内创建皮包公司，高薪招聘各种程序开发人员，让程序员到国外从事这种类型的网站开发工作，很多程序员在不知情的情况下被骗到新加坡，柬埔寨等东南亚国家。所以，各位程序员一定要懂得辨别：无缘无故许以高薪，还要到国外工作，一定是从事违法行业的公司，果断拒绝就对了。

2.以盈利为目的，非法盗用有著作权保护的作品。

信息时代，要想整合海量的内容，必须要用到一些“高科技”。目前网络上大多数的内容平台，都使用了一定程度的爬虫技术。只是以展示为目的，是不会触犯法律的。如果未经著作权人许可，以盈利为目的，对其作品进行复制是会触犯法律的，在我们的《著作权法》里都有非常明确的规定，例如作品，书籍，影像，美术等。

如果你发现公司的业务里，没有直接的授权，就把别人的东西放在自己的网站或者APP里进行售卖盈利，那就是造成违法了。

3.所有爬虫数据里涉及个人信息和隐私的，都属于违法行为。

大多数的数据分析公司，都会使用爬虫技术，但是这些能被获取的数据里，不能包括个人信息，即便是公开的，也不是你能随便获取的。一旦你的公司通过某种技术获取到了用户的个人信息，不管你是否用于盈利，都已经造成了违法。

根据《网络安全法》第44条：任何个人和组织不得窃取或者以其他非法方式获取个人信息。因此，如果爬虫在未经用户同意的情况下大量抓取用户的个人信息，则有可能构成非法收集个人信息的违法行为。

如果你的公司有这方面的业务，或者要求程序员开展这些事情，不要犹豫，要么举报公司，要么趁早离职。

4.涉及集资，传销等业务的P2P公司。

最近，P2P频繁暴雷，因为是网络借贷，所以这些暴雷的公司必然是有程序员的，所以，对于这种P2P公司如果涉及违法，那么参与开发的程序员到底算不算从犯？

如果程序员只是单纯的负责开发，只拿合理的死工资，本人对于公司的合法性和P2P的政策不了解，找工作也是通过正规渠道的。那么就不算从犯。

但是，如果还负责了公司的其他事情，或者没有只拿死工资，找工作也不是正规渠道的，那就另当别论了。重要的是，如果自己明知道公司是非法的，那么肯定就涉及犯罪了。

所以，对于这种做互联网金融的企业的程序员，需要多多了解一下自己公司当前的主营业务是否合法。是否涉及到非法集资、传销等违法行为。

程序员个人违法行为有哪些？

很多程序员都觉得自己只是公司的小卒，追究责任应该也是公司负责。其实不然，很多不经意间的行为，可能已经造成违法，也有很多人为了一己私利，明知故犯。

1.程序员通过非法手段获取个人信息，进行售卖获利。

过去有非常多的案例，例如银行开发人员售卖客户数据，Facebook5000万用户数据泄露等，这是一种双重违法行为，不仅涉及暴露个人信息，更是违法获取利益。

2.制作外挂。

很多游戏公司都对这种行为深恶痛绝，像腾讯会花大价钱组建外挂检测团队，直接追踪到你的ip地址，然后报警抓人。制作外挂进行售卖，违反了非法经营罪，破坏计算机信息系统罪，侵犯著作权罪等多个罪名，也是一种通过非法手段进行获利的行为，如果涉及的金额足够大，那么，获刑也会很重。

3.未按照相关规定，非法使用不被允许的爬虫接口。

如果是爬取公开的数据，通常不会被认为是侵权。Google、百度等搜索引擎都是这么爬取的。只有两种行为造成了违法：不遵守Robots协议和绕过防护措施对数据的访问，强行突破反爬措施。

通过允许的接口协议进行爬虫数据是不违法的，这点很重要，很多程序员为了方便，有可能会冒风险使用其他接口或者直接利用黑客手段突破防火墙获取数据，这无疑是在“作死”。

警惕：互联网不是法外之地

互联网就像是程序员的天堂，自己制作完成的东西和自己的技术能在这里展示，能被更多人所欣赏，自己的才华能无限被放大。

互联网也是一个现实世界的倒影，足够大，更容易藏污纳垢，隔着网线，你不知道另外一端的是人是鬼。

不管在哪里，都要有规则，在规则的限定下，万物才能有序运行，互联网也在规则范围内。

互联网是我们IT人所创造的世界，我们自己更要好好维护它，如果我们程序员因为某些行为而违法入狱，那就是我们违反了互联网的规则。虽然说技术无罪，但是某些业务有罪，如果我们能识别所有的违法行为，就能避免“程序监狱”！

【转自公众号：未艾人工智能】，声明：转载此文是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与本网联系，我们将及时更正、删除，谢谢。 邮箱地址：pufa@dcloud.io 。

原文链接

只是我个人的经验哦
我知道多人维护一个项目难免代码风格不同，但是有一些问题我发现还是可以优化的：
1.发现很多组件还在用watch。能用computed就别用watch，uni-ui组件毕竟不涉及到一些异步的操作，computed无论是代码的优雅还是避免潜在的性能问题都比watch要好。
2.一个组件传参要么就是一个:option,把所有的对象或者数组描述好，要么就扁平化全部分开，uni-ui的风格其实更接近扁平化分开的，这点统一一下固定风格对于新人熟悉uni-ui有好处

注意onLoad 相当于 created ，已废弃，被setup取代

import { onShow,onReady } from '@dcloudio/uni-app'  
import {ref} from 'vue'  
    export default {  
        setup(){  
            const title = ref(1)  
            const next = ()=>{  
                console.log('我是一个方法')  
            }  
            const add= ()=>{  
                title.value++  
            }  
            onShow(()=>{  
                console.log('onShow1');  
            })  
            onReady(()=>{  
                console.log('onReady');  
            })  
            return{  
                title,  
                next,  
                add  
            }  
        }  
    }

uni-app第一次入手踩坑路过
关于h5跨域问题总结了几个点
1.跨域配置请在manifest.json中写，其他的config修改貌似都不生效的
``"devServer" : {
"https" : false,
"disableHostCheck" : true, // 开启可以用自己的域名
"proxy":{
"/web":{
"target": "http://127.0.0.1:8100",//代理地址
"changeOrigin": true,// 如果接口跨域，需要进行这个参数配置
//ws: true, // proxy websockets
//pathRewrite方法重写url
"pathRewrite": {
"^/web": "/"
//pathRewrite: {'^/api': '/'} 重写之后url为 http://127.0.0.1:8100/xxxx
//pathRewrite: {'^/api': '/api'} 重写之后url为 http://127.0.0.1:8100/api/xxxx
}
}
}
}

2. luch-request组件中的apiBaseUrl域名配置一定要和网站启动的一致，端口号要带上，或者是不写会自动填充当前域名的

export const apiBaseUrl = 'http://localhost:8080'

3.配置nginx允许跨域，我是配置了的，不知道不配置能不能过，目前没时间试试  

4. 尝试发出请求，如果发现还是跨域，请检查请求头requst头部的Host，Origin，Referer是否一致  
我的是这样的  
Host: localhost:8080  
Origin: http://localhost:8080  
Referer: http://localhost:8080/  
总结：头一次使用uni-app也是头一次遇到跨域这样的，因为luch-request组件性质和COOL-UNI的原因，我也不做任何评论了，总之最好是能用官方的框架开发最好的，其次luch-request组件是一个十分优秀的组件只是我搭配了一个半桶水的二开框架。这个问题困扰一整天，我从congfig配置到manifest.json改了无数次，也看了一天的文档和例子，百度也翻完了，最后没想到居然在请求头这出了问题，也庆幸我之前有过协议方面的经验，不然也不知道要忙多久，踩过的路就知道了。我自己的理解就那么多了，如果有更好的解决方案或者意见，欢迎留言交流，不论技术高低总会有gei到的点的  
`

! https://zhuanlan.zhihu.com/p/405083946

tailwindcss 小程序定制化之旅

前言

tailwindcss 太好用，怎么在小程序里用？

小程序编写的 标签，class，还有 css选择器 的支持程度都和 H5 不一样,

所以我们要针对小程序目前的实现，去定制化 tailwindcss

以便来兼容 uni-app, taro 和 原生开发

定制化 tailwindcss

小程序到底有哪些限制呢？我们要从哪几个方向对 tailwindcss 进行定制呢？

1. 不能用特殊字符的 class

在 view text 的 class 写特殊字符，在渲染的时候会默认变成空格。

这里给大家直接举例子来直观的表现这个限制:

• class="w-1/4 h-1.5" => class="w-1 4 h-1 5"
• class="hover:text-xs" => class="hover text-xs"
• class="w-[996rpx] => class="w- 996rpx"

聪明的小伙伴们，一看这 3 个例子立马就知道,无法直接使用的场景:

• 部分带有 \/ \. 字符的工具类
• tailwindcss 中的 variants
• tailwindcss 的 jit 模式

当然小伙伴们看到不能直接使用这6个字,肯定知道我的意思是可以间接使用的。

比如对 class 进行重命名。

至于 variants , 由于 wxss 没有这么多选择器，我们暂时置空。

jit 模式目前处于试验阶段，等能方便的自定义解析器之时再用。

2. 无所事事的选择器

先上 wxss 官方文档链接

从里面，我们可以看到目前支持的选择器有：

显然，它比 h5 要少太多啦！

不过我们可以根据这张表进行进一步阉割。

• 去除基于 :not 选择器的 corePlugins ,例如 space ,divide*
• 去除不支持 * 选择器的 corePlugins , 例如默认添加 '*, ::before, ::after' 的插件 boxShadow , ring*
• 清空 tailwind variants ( 这类hover: focus: ,... ,统统干掉)

3. H5 需要的，小程序不需要

我们知道 tailwindcss 主要由三块组成:

• base 对 h5默认标签 进行 normalize
• components container media 容器布局
• utilities 工具类

显然在小程序这个场景下 base,components都是不需要的。

小程序标签和 h5 完全不同，没有 base 的必要

另外小程序自适应，主要靠 rpx，而不是靠 pc，小屏，中屏，大屏,所以 components 也不需要。

所以我们只需要在小程序中导入 utilities

另外由于 normalize 标签 和 自适应方案的不同

我们可以把 theme.screens 设为 false,不去生成 sm:xxx 这类的代码。

同时自然也不需要 preflight,container,accessibility这一类的插件了。

4. 把默认的 rem 转成 rpx

小程序专属自适应单位 rpx

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。

我们 rem 一般是 rootValue 为 16px, 那根据这个算法就是 32rpx。

这一块非常简单，写个插件或者几行代码转化一下就可以。

vscode 实现效果图:

具体实现可以看我附录的代码。

tailwindcss-miniprogram-preset

根据上文的经验写了一个预设 tailwindcss-miniprogram-preset

怎么使用呢？我们只需要在安装初始化 tailwindcss 和 postcss 后, 来安装一下。

yarn add -D tailwindcss-miniprogram-preset

然后在 tailwind.config.js 里，添加它

// tailwind.config.js  
module.exports = {  
  presets: [require('tailwindcss-miniprogram-preset')]  
  // ...  
}

然后在 app.wxss 里

@tailwind utilities;

就可以使用了。

在开发的时候，生成的 wxss 大概有 100+kb,不过在 purgecss后，就会非常小了。

purge 默认 process.env.NODE_ENV === 'production' 开启，也可手动开启。

再配合上 vscode 插件 Tailwind CSS IntelliSense 使用,可以直接自动生成智能提示，开发体验很好。

另外也写了一份 uni-app + vue3 + tailwindcss 的模板，有需要可以使用 uni-app-vue3-tailwind-vscode-template

也写了一个在原生小程序中，使用 scss + postcss + tailwindcss 的例子。接下来下一篇文章，我们就简单谈谈，如何抛弃微信开发者工具的 postcss 功能 , 让我们在原生的小程序开发中，自定义 postcss 和 sass 工具链编译，来享受它们和 tailwindcss 带来的各种好处。

setup函数里 不支持 ?. 和 ??

之前用vue2是可以用这个两个语法的，但是 切换 vue3 后 setup函数里 不支持 ?. 和 ??，感觉很难受

vue3的错误提示也很笼统，没有错误行号

联系WX：cuizhiyi0714
请备注：uniapp

有兴趣的同学请站内私信或加QQ私聊： 118-178-1455(QQ) 谢谢啦

我要注销开发者账户