自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

強(qiáng)烈推介的幾個(gè)微信小程序開發(fā)小技巧,簡(jiǎn)單又實(shí)用

開發(fā) 前端
前段時(shí)間在下開發(fā)了個(gè)微信小程序,開發(fā)過(guò)程中總結(jié)了一些我覺得對(duì)我有用的小技巧,提煉出來(lái),相當(dāng)于一個(gè)總結(jié)復(fù)盤,也希望可以幫助到大家

[[339372]]

前段時(shí)間在下開發(fā)了個(gè)微信小程序,開發(fā)過(guò)程中總結(jié)了一些我覺得對(duì)我有用的小技巧,提煉出來(lái),相當(dāng)于一個(gè)總結(jié)復(fù)盤,也希望可以幫助到大家。如果對(duì)大家確實(shí)有幫助,別忘了點(diǎn)贊哦 🌟 ~

  1.  微信開發(fā)者工具版本:1.03.2006090(2020-06-19)
  2.  基礎(chǔ)庫(kù)版本: v2.12.1 (2020-08-04)

1. 開發(fā)中可能遇到的坑以及 Tips

本來(lái)想寫個(gè)小技巧的,結(jié)果我總結(jié)了一堆坑,沒上手之前完全想象不到微信小程序的開發(fā)體驗(yàn)是如此之差、如此之爛,從微信開發(fā)者工具到所謂的「全新語(yǔ)言」,都有一種濃濃的半成品的 five 即視感,實(shí)在讓我 emmm.... 另外我發(fā)現(xiàn)網(wǎng)上的小程序文章大部分都是如何使用和如何避坑的實(shí)用文,而不是技巧文,這也從側(cè)面反映了小程序的坑多。

在微信小程序原生開發(fā)過(guò)程中,我不斷發(fā)出這樣的疑問(wèn)「為什么堂堂技術(shù)人才多如牛毛的騰訊,會(huì)推出如此 laji」,很多弱智反人類的地方,在兩三年前社區(qū)就已經(jīng)提出來(lái),官方回復(fù)已經(jīng)反饋正在修復(fù)中,但幾年過(guò)去了,還是沒有音信,官方回復(fù)仍然是一句冷冰冰的「已反饋」 😤

  1.     微信開發(fā)者工具經(jīng)常熱更新不起作用甚至白屏,重新編譯也不行,只能強(qiáng)行退出后再次打開;
  2.     跟上一條類似,有時(shí)候一點(diǎn)樣式出錯(cuò),預(yù)覽整個(gè)都白屏,調(diào)試器里也不說(shuō)哪里的問(wèn)題,直接就給你棄療不顯示,重新編譯也無(wú)法解決問(wèn)題,只能強(qiáng)行退出后再次打開;
  3.     跟上一條類似,調(diào)試器里報(bào)的錯(cuò)經(jīng)常沒什么用,驢頭不對(duì)馬嘴,讓人很難定位問(wèn)題;
  4.     Android 端自定義 Tabbar 在下拉刷新的時(shí)候,也會(huì)跟著屏幕一起往下移,而且是無(wú)法繞過(guò)的 Bug,自定義 Tabbar 樣式都寫好了的我又改成自帶的 Tabbar 了!
  5.     import 的路徑不支持絕對(duì)路徑,比如你希望引用 utils/fetch.js,在不管多深的組件里面你都要慢慢 ../ 點(diǎn)到根目錄,同樣 .wxss 文件 @import 導(dǎo)入文件時(shí)也只能使用相對(duì)路徑,所以就會(huì)出現(xiàn) ../../../../../../utils/fetch.js 這種東西;

      6.    靜態(tài)資源路徑不能有漢字,有漢字就無(wú)法加載;

      7.    .wxs 文件不支持 ES6,只能使用蹩腳的 ES5 寫法;

      8.    .wxml 中只能引入 .wxs 文件不能引入 .js 文件???

      9.     模板 {{}} 中連方法都不能執(zhí)行,只能處理簡(jiǎn)單的運(yùn)算如 + - * /,如果遇到數(shù)據(jù)需要 filter 的場(chǎng)景,需要在 .js 文件中預(yù)先格式化好再一個(gè)個(gè) setData,比如經(jīng)常寫的 [2,3,4].includes(type),居然都跑不起來(lái)!

     10.   .wxs 文件中無(wú)法使用 Date 對(duì)象,所以不能 new Date(),只能使用蹩腳的 getDate 方法,正則也是一樣,生成正則對(duì)象需要使用 getRegExp 函數(shù) getRegExp(pattern[, flags]);

     11.   .wxs 中可以調(diào)用其它 .wxs 文件,并且只能 require 調(diào)用 .wxs 文件,引入的文件必須使用相對(duì)路徑;

     12.   .setData 連一個(gè)對(duì)象合并都懶得做,如果 data: {a: {b: 1, c: 1}},那么 setData({a: {b: 2}}) 就會(huì)丟失 a.c 的值,真是讓人火冒三丈啊,還要 setData({['a.b': 2]}) 這樣才行;

     13.   .IOS 上 Date 對(duì)象獲取任意時(shí)間參數(shù)比如 getDay、getTime 都為 NaN,是因?yàn)?IOS 的 Date 構(gòu)造函數(shù)不支持 2018-04-26 這種格式的日期,必須轉(zhuǎn)換為 2018/04/26 這種格式才會(huì)顯示正常;

     14.   開發(fā)版小程序有時(shí)候請(qǐng)求莫名其妙發(fā)不出去,右上角三個(gè)點(diǎn) enable debug 打開「開發(fā)調(diào)試」之后就莫名其妙能發(fā)出去請(qǐng)求了,在多部手機(jī)上都是這樣,不明真相。

2. 微信請(qǐng)求 Promise 化

2.1 使用現(xiàn)成的庫(kù)

安裝 Promise 庫(kù) wx-promise-pro,記得一定要帶 -s 或 --production,要不然無(wú)法構(gòu)建成功。 

  1. npm i -S wx-promise-pro 

然后在 app.js 中: 

  1. import { promisifyAll } from 'wx-promise-pro'  
  2. promisifyAll()  // promisify all wx api  
  3. App({ ... }) 

之后就可以正常使用了: 

  1. wx.pro.showLoading({  
  2.     title: '加載中',  
  3.     mask: true  
  4. })  
  5.   .then(() => console.log('in promise ~')) 

2.2 自己實(shí)現(xiàn)

其實(shí)我們可以自己來(lái)實(shí)現(xiàn)一個(gè)這樣的庫(kù),原理很簡(jiǎn)單,以原生 API 的 wx.request 為例: 

  1. // 原生 API 使用方式  
  2. wx.request({  
  3.     url: '',     // 請(qǐng)求的 url  
  4.     data: {},    // 參數(shù)  
  5.     method: '',  // post、get  
  6.     success: res => {  
  7.         // 請(qǐng)求成功回調(diào)函數(shù),res為回調(diào)參數(shù)  
  8.     },  
  9.     fail: res => {  
  10.         // 請(qǐng)求失敗回調(diào)函數(shù),res為回調(diào)參數(shù)  
  11.     }  
  12. }) 

如果我們將其 Promise 化,應(yīng)該的調(diào)用方式希望是: 

  1. // Promise 化后的期望使用方式  
  2. wx.pro.request({  
  3.     url: '',     // 請(qǐng)求的 url  
  4.     data: {},    // 參數(shù)  
  5.     method: ''   // post、get  
  6. })  
  7.   .then(res => {  
  8.       // 請(qǐng)求成功回調(diào)函數(shù),res為回調(diào)參數(shù)  
  9.   })  
  10.   .catch(res => {  
  11.       // 請(qǐng)求失敗回調(diào)函數(shù),res為回調(diào)參數(shù)  
  12.   }) 

并且 then 函數(shù)返回的是一個(gè) Promise 對(duì)象,讓這個(gè)函數(shù)可以不斷鏈?zhǔn)秸{(diào)用下去,所以首先需要 new 出來(lái)一個(gè) Promise 對(duì)象: 

  1. function request(opt) {  
  2.     return new Promise((resolve, reject) => {  
  3.         wx.request({  
  4.             ...opt,  
  5.             success: res => { resolve(res)},  
  6.             fail: res => {reject(res)}  
  7.         })  
  8.     })  

這里代碼我們可以進(jìn)一步改進(jìn),由于 success、fail 這里傳入的參數(shù)只是由 resolve、reject 方法執(zhí)行了下,所以可以直接傳入 resolve、reject 方法即可。

另外,由于其他小程序原生 API 格式一致,所以我們可以使用柯里化方法,來(lái)將其他需要進(jìn)行 Promise 化的 API 進(jìn)行處理: 

  1. function promisify(api) {  
  2.     return (opt = {}) => {  
  3.         return new Promise((resolve, reject) => {  
  4.             api({  
  5.                 ...opt,  
  6.                 fail: reject,  
  7.                 success: resolve  
  8.             })  
  9.         })  
  10.     } 

然后,將柯里化方法執(zhí)行的結(jié)果作為新的 Promise 化的 API 掛載到 wx.pro 對(duì)象上: 

  1. // 將指定 API 進(jìn)行 Promise 化  
  2. wx.pro.request = promisify(wx.request)  
  3. // 使用  
  4. wx.pro.request({...})  
  5.     .then(...) 

然后為了方便我們使用其他方法,可以循環(huán)將 wx 對(duì)象上可以被 Promise 化的方法比如 request、scanCode、showToast、getUserInfo 等一一掛載到 wx.pro 對(duì)象上,使用時(shí)可以直接 wx.pro.xx,由于這個(gè)方法執(zhí)行返回的是一個(gè) Promise 對(duì)象,因此可以像其它 Promise 化的對(duì)象那樣使用。

事實(shí)上,不知不覺,我們就自己實(shí)現(xiàn)了 wx-promise-pro 的源碼,這個(gè)庫(kù)的核心代碼也就是上面那這幾行 🥳

2.3 在項(xiàng)目中使用

有了上面的工具后,我們可以將其使用在項(xiàng)目中,為了不在項(xiàng)目中遍布 wx.request 或 wx.pro.request 這里可以簡(jiǎn)單進(jìn)行封裝,新建兩個(gè)文件如下: 

  1. // utils/api/fetch.js 封裝請(qǐng)求方法、請(qǐng)求攔截器  
  2. const app = getApp()  
  3. const BaseUrl = 'http://172.0.0.1:7300/mock'  
  4. const TokenWhiteList = [ 
  5.      '/app/user/get-by-code'     // 不需要鑒權(quán)的api手動(dòng)添加到這里  
  6.  
  7. /**  
  8.  * 設(shè)置請(qǐng)求攔截器  
  9.  * @param params 請(qǐng)求參數(shù)  
  10.  */  
  11. const fetch = (params = {}) => {  
  12.     // 攔截器邏輯  
  13.     if (!TokenWhiteList.includes(params.url)) {  
  14.         params.header = {  
  15.             'content-type': 'application/json',             // 默認(rèn)值  
  16.             'token': app.globalData.token || ''  
  17.         }  
  18.     }  
  19.     if (params.url.startsWith('/')) {    // 拼接完整URL  
  20.         params.url = BaseUrl + params.url  
  21.     }  
  22.     // 返回promise  
  23.     return wx.pro.request({ ...params })  
  24.       .then(({ data: { code, message, data } }) => {  
  25.           // ... 各種異常情況的邏輯處理  
  26.           // 與后端約定 code 20000 時(shí)正常返回  
  27.           if (code === 20000) return Promise.resolve(data)  
  28.           return Promise.reject(message)  
  29.       }) 
  30. export { fetch } 

然后再將所有 API 封裝到單獨(dú)的文件中集中管理: 

  1. // utils/api/apis.js 封裝所有請(qǐng)求 API  
  2. import { fetch } from './fetch'  
  3. /* 根據(jù)微信code獲取用戶信息 */  
  4. const appUserGetByCode = ({ code } = {}) => fetch({  
  5.     url: '/app/user/get-by-code',  
  6.     data: { code }  
  7. })  
  8. /* 掃碼登錄 */  
  9. const appUserQrLogin = ({ qrCode } = {}) => fetch({  
  10.     method: 'POST',  
  11.     url: '/app/user/qr-login',  
  12.     data: { qrCode } 
  13.  })  
  14. /* 個(gè)人信息 */  
  15. const appUserInfo = () => fetch({  
  16.     url: '/app/user/info'  
  17. })  
  18. /* 系統(tǒng)參數(shù)獲取,數(shù)據(jù)字典 */  
  19. const appSysParamListByParam = () => fetch({  
  20.     url: '/app/sys-param/list-by-param'  
  21. })  
  22. /* 數(shù)據(jù)字典所有 */  
  23. const appSysParamListAll = () => fetch({  
  24.     url: '/app/sys-param/list-all'  
  25. })  
  26. export {  
  27.     appSysParamListAll,   // 數(shù)據(jù)字典所有  
  28.     appSysParamListByParam,   // 系統(tǒng)參數(shù)獲取,數(shù)據(jù)字典  
  29.     appUserGetByCode,   // 根據(jù)微信code獲取用戶信息  
  30.     appUserQrLogin,   // 掃碼登錄  
  31.     appUserInfo   // 個(gè)人信息  

在要使用 API 的地方就可以這樣引入: 

  1. import * as Api from '../../utils/api/apis.js'   // 相對(duì)路徑  
  2. // 使用方式  
  3. Api.appSysParamListAll()  
  4.   .then(({ dataList }) => this.upData({ sysParamList: dataList }))  
  5.   .then(() => {  
  6.       const keyList = this.data.sysParamList.map(T => T.key)  
  7.       this.upData({  
  8.           keyList,  
  9.           formData: { keys: keyList }  
  10.       })  
  11.   }) 

使用方式就很舒服,這里使用到了 upData,就是下面我要介紹的內(nèi)容,是在下非常推介的小程序工具~ 🥳

3. setState 修改 data 中想修改對(duì)象的屬性

在小程序中,data 是不能直接操作的,需要使用 setData 函數(shù)。鑒于微信小程序開發(fā)時(shí) setData 的使用體驗(yàn)十分蹩腳,我使用了個(gè)庫(kù)函數(shù) wx-updata,這個(gè)庫(kù)函數(shù)在開發(fā)的時(shí)候?qū)ξ液苡袔椭?,這里特意推介給大家。

3.1 為什么要使用 wx-updata

你在使用 setData 的時(shí)候,是不是有時(shí)候覺得很難受,舉個(gè)簡(jiǎn)單的例子: 

  1. // 你的 data  
  2. data: {  
  3.     name: '蠟筆小新',  
  4.     info: { height: 140, color: '黃色' }  

如果要修改 info.height 為 155,使用 setData 要怎么做呢: 

  1. // 這樣會(huì)把 info 里其他屬性整不見了  
  2. this.setData({ info: { height: 155 } })  
  3. // 你需要取出 info 對(duì)象,修改后整個(gè) setData  
  4. const { info } = this.data 
  5. info.height = 155  
  6. this.setData({ info }) 

似乎并不太復(fù)雜,但如果 data 是個(gè)很大的對(duì)象,要把比較深且不同的對(duì)象、數(shù)組項(xiàng)挨個(gè)改變: 

  1. data: {  
  2.     name: '蠟筆小新',  
  3.     info: {  
  4.         height: 140, color: '黃色',  
  5.         desc: [{ age: 8 }, '最喜歡大象之歌', '靚仔', { dog: '小白', color: '白色' }]  
  6.     }  

比如某個(gè)需求,需要把 info.height 改為 155,同時(shí)改變 info.desc 數(shù)組的第 0 項(xiàng)的 age 為 12,第 3 項(xiàng)的 color 為灰色呢? 

  1. // 先取出要改變的對(duì)象,改變數(shù)字后 setData 回去  
  2. const { info } = this.data  
  3. info.height = 155  
  4. info.desc[0].age = 12  
  5. info.desc[3].color = '灰色'  
  6. this.setData({ info }) 
  7. // 或者像某些文章里介紹的,這樣可讀性差,也不太實(shí)用  
  8. this.setData({  
  9.     'info.height': 155,  
  10.     'info.desc[0].age': 12,  
  11.     'info.desc[3].color': '灰色'  
  12. }) 

上面這兩種方法,是我們平常小程序里經(jīng)常用的,和其他 Web 端的框架相比,就很蹩腳,一種濃濃的半成品感撲面而來(lái),有沒有這樣一個(gè)方法: 

  1. this.upData({  
  2.     info: {  
  3.         height: 155,  
  4.         desc: [{ age: 12 }, , , { color: '灰色' }]  
  5.     }  
  6. }) 

這個(gè)方法會(huì)幫我們深度改變嵌套對(duì)象里對(duì)應(yīng)的屬性值,跳過(guò)數(shù)組項(xiàng)里不想改變的,只設(shè)置我們提供了的屬性值、數(shù)組項(xiàng),豈不是省略了一大堆蹩腳的代碼,而且可讀性也極佳呢。

這就是為什么我在上線的項(xiàng)目中使用 wx-updata,而不是 setData

wx-updata 的原理其實(shí)很簡(jiǎn)單,舉個(gè)例子: 

  1. this.upData({  
  2.     info: {  
  3.         height: 155,  
  4.         desc: [{ age: 12 }]  
  5.     }  
  6. })  
  7. // 會(huì)被自動(dòng)轉(zhuǎn)化為下面這種格式,  
  8. // this.setData({  
  9. //    'info.height': 155,  
  10. //    'info.desc[0].age': 12,  
  11. // }) 

原來(lái)這個(gè)轉(zhuǎn)化工作是要我們自己手動(dòng)來(lái)做,現(xiàn)在 wx-updata 幫我們做了,豈不美哉!

3.2 wx-updata 使用方式

在一般情況下,我們可以將方法直接掛載到 Page 構(gòu)造函數(shù)上,這樣就可以在 Page 實(shí)例中像使用 setData 一樣使用 upData 了: 

  1. // app.js 中掛載  
  2. import { updataInit } from './miniprogram_npm/wx-updata/index'  // 你的庫(kù)文件路徑  
  3. App({  
  4.     onLaunch() {  
  5.         Page = updataInit(Page, { debug: true })  
  6.     }  
  7. })  
  8. // 頁(yè)面代碼中使用方式  
  9. this.upData({  
  10.     info: { height: 155 },  
  11.     desc: [{ age: 13 }, '帥哥'],  
  12.     family: [, , [, , , { color: '灰色' }]] 
  13.  }) 

有的框架可能在 Page 對(duì)象上進(jìn)行了進(jìn)一步修改,直接替換 Page 的方式可能就不太好了,wx-updata 同樣暴露了工具方法,用戶可以在頁(yè)面代碼中直接使用工具方法進(jìn)行處理: 

  1. // 頁(yè)面代碼中  
  2. import { objToPath } from './miniprogram_npm/wx-updata/index'  // 你的庫(kù)文件路徑  
  3. Page({  
  4.     data: { a: { b: 2}, c: [3,4,5]},  
  5.     // 自己封裝一下  
  6.     upData(data) {  
  7.         return this.setData(objToPath(data))  
  8.     },  
  9.     // 你的方法中或生命周期函數(shù)  
  10.     yourMethod() {  
  11.         this.upData({ a: { b: 7}, c: [8,,9]})  
  12.     }  
  13. }) 

針對(duì)修改數(shù)組指定項(xiàng)的時(shí)候,可能存在的跳過(guò)數(shù)組空位的情況,wx-updata 提供了 Empty 的 Symbol 類型替位符,還有數(shù)組的對(duì)象路徑方式,感興趣可以看看 wx-updata 的文檔,也可以參考 <開發(fā)微信小程序,我為什么放棄 setData,使用 upData> 這篇介紹文章。

另外,使用了 wx-updata 也還可以使用原來(lái)的 setData,特別是有時(shí)候要清空數(shù)組時(shí),靈活使用,可以獲得更好的小程序開發(fā)體驗(yàn),祝大家小程序開發(fā)愉快 🤣

4. 使用 scss 寫樣式

4.1 Webstorm 配置方法

關(guān)于蹩腳的 .wxss 樣式,我使用 webstorm 的 file watcher 工具把 scss 文件監(jiān)聽改動(dòng)并實(shí)時(shí)編譯成 .wxss 文件,感覺比較好用,這里給大家分享一下我的配置:

然后記得在 .gitignore 文件中加入要忽略的樣式: 

  1. *.scss  
  2. *.wxss.map 

這樣在上傳到 git 的時(shí)候,就不會(huì)上傳 scss 文件了~ 當(dāng)然如果你的團(tuán)隊(duì)成員需要 scss 的話,還是建議 git 上傳的時(shí)候也加上 scss 文件。

這樣設(shè)置之后,一個(gè)組件在本地的會(huì)是下面這樣

其中我們需要關(guān)注的就是 .js、.json、.scss、.wxml 文件,另外的文件 .wxss 會(huì)在你改動(dòng) .scss 文件之后自動(dòng)生成并更新,而 .wxss.map 是插件自動(dòng)生成的映射關(guān)系,不用管。

如果不是使用 webstorm,可以直接執(zhí)行命令 sass --watch index.scss:index.wxss -s expanded,命令行如果關(guān)閉,sass 命令就不會(huì)監(jiān)聽文件的變動(dòng)然后編譯,所以最好用編輯器的插件。

同理,也可以使用 less、stylus 等預(yù)編譯語(yǔ)言。

4.2 Visual Studio Code 配置方法

萬(wàn)能的 VSC 當(dāng)然也可以做到這個(gè)功能,搜索并下載插件 easy sass,然后在 setting.json 中修改/增加配置: 

  1. "easysass.formats": [  
  2.   {  
  3.     "format": "expanded",  
  4.     "extension": ".wxss"  
  5.   },  
  6.   {  
  7.     "format": "compressed",  
  8.     "extension": ".min.wxss"  
  9.   }  

上面 expanded 是編譯生成的 .wxss 文件,下面 compressed 是壓縮之后的 .wxss 樣式文件,下面這個(gè)用不到可以把下面這個(gè)配置去掉,然后在 .gitignore 文件中加入要忽略的中間樣式: 

  1. *.scss 

當(dāng)然也可以不添加,如果你的同事也是實(shí)用 scss 來(lái)開發(fā)小程序的話,其他跟上面一樣,至此你就可以在小程序開發(fā)中快樂使用 scss 了~

5. 使用 iconfont 圖標(biāo)字體

在 Web 開發(fā)中 iconfont 可謂是最常用的靈活圖標(biāo)字體工具了,這里介紹一下如何在微信小程序中引入 iconfont 圖標(biāo)。

首先找到你想使用的圖標(biāo)們,點(diǎn)擊購(gòu)物車之后下載到本地。

下載到本地是一個(gè)壓縮包,解壓縮之后將 iconfont.css 文件復(fù)制到微信小程序的 styles 文件夾中 (在下的習(xí)慣,也可以放到你想放的地方比如 fonts),將后綴改為 .wxss

在 app.wxss 中引入樣式:

  1. @import "styles/iconfont.wxss"; 

然后在 .wxml 中就可以使用剛剛你添加的圖標(biāo)了,Web 使用 i 標(biāo)簽,小程序中使用 text 標(biāo)簽: 

  1. <text class="iconfont icon-my-edit" style="color: blue"></text> 

如果后面要加新的圖標(biāo),要下載新的 iconfont.css 的文件到本地重命名并覆蓋,重新走一遍這個(gè)流程。

當(dāng)然,如果你使用的樣式庫(kù)提供的一些 icon 能滿足你的要求,那更好,就不用引入外部圖標(biāo)字體文件了,不過(guò)大部分情況下是不滿足的 🤣 

 

責(zé)任編輯:龐桂玉 來(lái)源: segmentfault
相關(guān)推薦

2022-08-16 10:53:56

JavaScript前端技巧

2017-05-08 15:03:07

微信小程序開發(fā)實(shí)戰(zhàn)

2021-05-10 14:53:22

微信技巧小程序

2015-02-04 10:32:57

Objective-CSwift

2016-09-28 18:10:59

微信程序MINA

2016-09-27 16:38:24

JavaScript微信Web

2016-11-04 10:49:48

微信小程序

2016-09-27 20:36:23

微信HttpWeb

2024-08-30 08:12:17

開源微信小程序

2011-07-07 16:17:14

2018-09-11 10:32:07

云開發(fā)小程序開發(fā)者

2021-03-10 09:44:20

微信小程序APP

2016-11-28 15:52:09

微信小程序開發(fā)

2018-09-07 23:38:45

小程序開發(fā)框架

2016-11-07 10:30:07

微信小程序安裝配置

2016-10-20 21:02:12

微信小程序javascript

2017-01-09 10:01:49

微信小程序

2017-06-09 10:06:54

微信小程序架構(gòu)分析

2017-06-09 12:58:20

微信小程序架構(gòu)分析

2017-06-09 10:40:00

微信小程序架構(gòu)分析
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)