• 服務熱線:15218380061

    當前位置:文章首頁 >> 小程序開發

    小程序開發-靜態資源無縫轉移到騰訊云COS

    時間: 2019-11-16 10:56:37 來源:CallMeSoul 作者:天天編輯 


    今天介紹的工具是wecos[1]

    ?


    webpack小程序打包項目

    最好是開發完再來進行這一步,前期專心開發。

    我前期開發時,引用靜態資源用的是相對路徑,用的絕對路徑應該也可以的。

    項目開發完后


    原生小程序


    原生的小程序直接根據wecos的文章操作即可,wecos提供了上傳本地資源文件到cos、替換小程序的引用本地路徑為上傳路徑等。

    這里不作詳細說明,主要介紹webpack打包的小程序項目。

    因為原生寫起來很不方便。

    ?

    1.

    webpack設置打包后的cdn地址, webpack rules選項:






















    {        test: /\.(png|jpg|jpeg|gif|svg)$/,        use: {          loader: 'file-loader',          options: {            name: '/[path][name].[ext]',            publicPath: function (file) {              if(isProduction){//判斷是否生產環境,自己判斷咯。                if(file.indexOf('tabbar')>=0){//如果有tabbar的,tabbar用一個tabbar的文件夾裝起來,因為tabbar圖片只支持本地。                  return file;                }                else{                  return 'https://xxx-1234567.cos.ap-guangzhou.myqcloud.com/'+file;//你的騰訊云cos bucket的域名。                }              }else{                return file;              }            }          }        },      },

    2.

    安裝wecos

    npm install -g wecos

    3.

    跟目錄創建wecos.config.json文件

    4.

    填寫wecos.config.json 配置















    {  "appDir": "./dist/assets",  "cos": {    "secret_id": "xxxxx",    "secret_key": "xxxxx",    "bucket": "xxx-1234567",//bucker-appid    "region": "ap-guangzhou", //創建 bucket 時選擇的地域簡稱    "folder": "/assets" //資源存放在 bucket 的哪個目錄下  },  "uploadFileSuffix": [".jpg",".png",".gif",".webp",".svg"],  "uploadFileBlackList": [//不上傳的圖片,填tabbar的目錄    "./dist/assets/images/tabbar",  ]}

    5.

    在根目錄運行wecos即可。







    ?

    總結

    ?

    為什么不用webpack的 publicPath 而用file-loaderpublicPath ?

    因為webpack的 publicPath只支持字符串,一但改成線上域名,所有靜態資源的前綴都會變成cdn域名。而小城的tabbar并不支持網絡圖片,base64也不支持,只支持本地圖片。

    這時我們就用file-loaderpublicPath ,支持函數且返回文件名,可以寫條件去過濾掉tabbar的文件茂名企業融資咨詢。

    使tabbar文件使用本地的,而其他使用線上cdn域名的文件。

    ?

    為什么要用wecos?

    當然你也可以不用自己,本地打包后自己手動上傳到cos后臺。

    然后刪除了本地的圖片文件(除了tabbar的圖片)。

    然后開發者工具再上傳代碼。

    你會發現這步驟很累贅。

    使用wecos后,我們打包后只需要跑一下cos就可以自動上傳本地的上cdn,且自動刪除本地的(tabbar圖片除外)。

    是不是方便多了?

    趕緊在你項目用上把!### 今天介紹的工具是wecos[2]

    ?

    原生小程序





    原生的小程序直接根據wecos的文章操作即可,wecos提供了上傳本地資源文件到cos、替換小程序的引用本地路徑為上傳路徑等。

    這里不作詳細說明,主要介紹webpack打包的小程序項目。

    因為原生寫起來很不方便。

    ?

    webpack小程序打包項目

    最好是開發完再來進行這一步,前期專心開發。

    我前期開發時,引用靜態資源用的是相對路徑,用的絕對路徑應該也可以的。

    項目開發完后

    1.

    webpack設置打包后的cdn地址, webpack rules選項:






















    {        test: /\.(png|jpg|jpeg|gif|svg)$/,        use: {          loader: 'file-loader',          options: {            name: '/[path][name].[ext]',            publicPath: function (file) {              if(isProduction){//判斷是否生產環境,自己判斷咯。                if(file.indexOf('tabbar')>=0){//如果有tabbar的,tabbar用一個tabbar的文件夾裝起來,因為tabbar圖片只支持本地。                  return file;                }                else{                  return 'https://xxx-1234567.cos.ap-guangzhou.myqcloud.com/'+file;//你的騰訊云cos bucket的域名。                }              }else{                return file;              }            }          }        },      },

    2.

    安裝wecos

    npm install -g wecos

    3.

    跟目錄創建wecos.config.json文件

    4.

    填寫wecos.config.json 配置















    {  "appDir": "./dist/assets",  "cos": {    "secret_id": "xxxxx",    "secret_key": "xxxxx",    "bucket": "xxx-1234567",//bucker-appid    "region": "ap-guangzhou", //創建 bucket 時選擇的地域簡稱    "folder": "/assets" //資源存放在 bucket 的哪個目錄下  },  "uploadFileSuffix": [".jpg",".png",".gif",".webp",".svg"],  "uploadFileBlackList": [//不上傳的圖片,填tabbar的目錄    "./dist/assets/images/tabbar",  ]}

    5.

    在根目錄運行wecos即可。







    ?

    總結

    ?

    為什么不用webpack的 publicPath 而用file-loaderpublicPath ?

    因為webpack的 publicPath只支持字符串,一但改成線上域名,所有靜態資源的前綴都會變成cdn域名。而小城的tabbar并不支持網絡圖片,base64也不支持,只支持本地圖片。

    這時我們就用file-loaderpublicPath ,支持函數且返回文件名,可以寫條件去過濾掉tabbar的文件茂名企業融資咨詢。

    使tabbar文件使用本地的,而其他使用線上cdn域名的文件。

    ?

    為什么要用wecos?

    當然你也可以不用自己,本地打包后自己手動上傳到cos后臺。

    然后刪除了本地的圖片文件(除了tabbar的圖片)。

    然后開發者工具再上傳代碼。

    你會發現這步驟很累贅。

    使用wecos后,我們打包后只需要跑一下cos就可以自動上傳本地的上cdn,且自動刪除本地的(tabbar圖片除外)。

    是不是方便多了?

    趕緊在你項目用上把!




    References

    [1] wecos: https://github.com/tencentyun/wecos
    [2] wecos: https://github.com/tencentyun/wecos





    客服 熱線 回頂部
    国产亚洲一本大道中文在线,国产高清在线喷奶水,日本有码中文字幕欧美激情,亚洲乱亚洲乱妇24p,色噜噜综合在线,日韩区一中文字目一区二区,亚洲AV中文二区