js怎麼使用小程序

Ⅰ 微信小程序如何使用全局js

1.要注意的是必須要用mole.exports導出要調用屬性或方法；
2.使用的時候用var api = require('../../utils/api.js'); 載入代碼，然後使用api.SYNC_TABLE_URL 直接調用
3.調用方法也差不多。

Ⅱ 小程序 使用upng.js 把小程序選擇的圖片轉換為base64

有時候會遇到後端需要前端獲取的圖片文件轉換成base64，在傳給後台

小程序有專門的選擇圖片介面，

wx.chooseImage(OBJECT)

但是這個只是返回一個圖片的臨時路徑，並不是文件數據本身。

小程序暫時沒有介面直接轉base64的

所以我們需要使用canvas和canvasGetImageData（小程序版本1.9.0以後要才有）先獲取圖片內容，

再通過插件upng.js插件實現圖片轉base64（所需插件文件附件中）

1. 把upng.js和pako.min.js文件放到項目中

2. 在pages下的頁面js文件中導入

var upng = require('../../utils/upng.js');

這里只需要導入npng.js ，pako.min.js是在npng,js裡面調用

3. 建一個canvas

chooseImage">人臉測試  

// 畫布

// 生成base64點陣圖片展示 變數imgbase64

need-to-insert-img

4. 添加js點擊chooseImage事件

chooseImage: function() {

        var that = this;

        var coss_signature = wx.getStorageSync('cos_signature');

        var canvasID = "imgCanvas";

        var canvas = wx.createCanvasContext(canvasID)

        wx.chooseImage({

            sourceType: ['album', 'camera'],

            sizeType: ['original'],

            count: 1,

            success: function (res) {

                var tempFilePaths = res.tempFilePaths;

                // 獲取文件路徑

                var filePath = tempFilePaths[0];

                // 1. 繪制圖片至canvas

                canvas.drawImage(filePath, 0, 0, 300, 200)

                // 繪制完成後執行回調，API 1.7.0

                canvas.draw(false, function(res){

                    // 2. 獲取圖像數據， API 1.9.0

                    wx.canvasGetImageData({

                        canvasId: canvasID,

                        x: 0,

                        y: 0,

                        width: 300,

                        height: 200,

                        success(res) {

                          // 3. png編碼

                          let pngData = upng.encode([res.data.buffer], res.width, res.height)

                          // 4. base64編碼

                          let base64 = wx.arrayBufferToBase64(pngData)

                          // ...

                          that.setData({

                            imgbase64: base64

                          })

                        }

                    })

                })

            }

        })

    }

5. 實現

need-to-insert-img

need-to-insert-img

tips

畫布畫的圖片的長和寬是固定的，這個按照自己需求設置。

可以通過小程序的

wx.getImageInfo(OBJECT)

獲取長和寬

相關鏈接

upng.js:  https://github.com/photopea/UPNG.js

wx-cardscanner:  https://github.com/zh8637688/wx-cardscanner 有時候會遇到後端需要前端獲取的圖片文件轉換成base64，在傳給後台

小程序有專門的選擇圖片介面，

但是這個只是返回一個圖片的臨時路徑，並不是文件數據本身。

小程序暫時沒有介面直接轉base64的

所以我們需要使用canvas和canvasGetImageData（小程序版本1.9.0以後要才有）先獲取圖片內容，

再通過插件upng.js插件實現圖片轉base64（所需插件文件附件中）

1. 把upng.js和pako.min.js文件放到項目中

2. 在pages下的頁面js文件中導入

var upng = require('../../utils/upng.js');

這里只需要導入npng.js ，pako.min.js是在npng,js裡面調用

3. 建一個canvas

chooseImage">人臉測試  

// 畫布

// 生成base64點陣圖片展示 變數imgbase64

4. 添加js點擊chooseImage事件

chooseImage: function() {

        var that = this;

        var coss_signature = wx.getStorageSync('cos_signature');

        var canvasID = "imgCanvas";

        var canvas = wx.createCanvasContext(canvasID)

        wx.chooseImage({

            sourceType: ['album', 'camera'],

            sizeType: ['original'],

            count: 1,

            success: function (res) {

                var tempFilePaths = res.tempFilePaths;

                // 獲取文件路徑

                var filePath = tempFilePaths[0];

                // 1. 繪制圖片至canvas

                canvas.drawImage(filePath, 0, 0, 300, 200)

                // 繪制完成後執行回調，API 1.7.0

                canvas.draw(false, function(res){

                    // 2. 獲取圖像數據， API 1.9.0

                    wx.canvasGetImageData({

                        canvasId: canvasID,

                        x: 0,

                        y: 0,

                        width: 300,

                        height: 200,

                        success(res) {

                          // 3. png編碼

                          let pngData = upng.encode([res.data.buffer], res.width, res.height)

                          // 4. base64編碼

                          let base64 = wx.arrayBufferToBase64(pngData)

                          // ...

                          that.setData({

                            imgbase64: base64

                          })

                        }

                    })

                })

            }

        })

    }

5. 實現

tips

畫布畫的圖片的長和寬是固定的，這個按照自己需求設置。

可以通過小程序的

獲取長和寬

相關鏈接

upng.js:  https://github.com/photopea/UPNG.js

wx-cardscanner:  https://github.com/zh8637688/wx-cardscanner

Ⅲ 微信小程序wxs的使用（當頁面數據渲染前添加js操作)

小程序的wxs功能可以讓wsmxl可以調用和編寫js,基本上wxs和JS無關系,只是語法形式很相似。

如下寫了兩個關於時間的函數，並將它們導出，

<wxs mole="m1">

var getMax = function(flightDate) {

    var now = getDate().getDate();

    var flDate = getDate(flightDate).getDate();

    if( now < flDate ){

      return '+1';

    }else{

      return '';

    }

}

var formartTime = function(flightDate,format){

  if(flightDate){

    var realDate = getDate(flightDate);

    function timeFormat(num) {

      return num < 10 ? '0' + num : num;

    }

    var date = {

      "Y": timeFormat(realDate.getFullYear()),

      "M": timeFormat(realDate.getMonth() + 1),

      "d": timeFormat(realDate.getDate()),

      "h": timeFormat(realDate.getHours()),

      "m": timeFormat(realDate.getMinutes()),

      "s": timeFormat(realDate.getSeconds()),

      "q": Math.floor((realDate.getMonth() + 3) / 3),

      "S": realDate.getMilliseconds(),

    };

    if (!format) {

      format = "yyyy-MM-dd hh:mm:ss";

    }

    if( format == 'hh:mm' ){

        return date.h+':'+date.m;

    }else{

        return date.h+':'+date.m;

    }

  }else{

    return false;

  }

}

mole.exports.getMax = getMax;

mole.exports.formartTime = formartTime;

</wxs>

可在頁面添加如下使用：

m1.formartTime(）;  m1.getMax(）;

Ⅳ 怎樣用js開發微信小程序

微信小程序之js
如果你想開發一款微信小程序學會微信小程序的js是必須要精通的，只要你html+css+js的基礎打的好在來全力的學習微信小程序js，之後在前端開發上就沒有什麼問題了，但是微信js是需要花精力去學習的，可以買一本參考書或者了解下微信小程序的api都是可以快速的幫助你介入開發的隊列。

Ⅳ 怎麼用js做一個小程序

javascript是針對web和瀏覽器的，也就是寫在html文件中讓瀏覽器解釋和執行的代碼，所以想寫直接寫到html文件中然後用瀏覽器打開就可以實現了

Ⅵ 微信小程序 js 如何點擊進入新的界面

標簽跳轉相當於HTML的a標簽

<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator>

編程式跳轉：

wx.navigateTo({url: 'test?id=1',})

詳情查看微信官方文檔：

navigator 導航標簽組件網頁鏈接

navigateTo API:網頁鏈接

Ⅶ 在小程序的其他JS文件中均可以使用全局的什麼方法獲取小程序實例

在小程序的其他JS文件中均可以使用全局的App(OBJECT)方法獲取小程序實例。js文件是比較特殊的，它是微信小程序的入口文件，掌控整個小程序的生命周期，同時有一些全局的屬性、變數也存放在這個文件中。

Ⅷ 如何在微信小程序js文件注釋快捷鍵

1、JS的注釋一般是雙斜杠 // 或者是 /**/ 這樣的塊注釋；而.json是配置文件，其內容必須符合JSON格式，所以文件內部不允許有注釋。

2、app.json是全局配置文件，微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程序的首頁 。

Ⅸ 怎樣使用微信小程序的第三方js庫

方法一：rpn.js：使用rpn.js實現eval函數功能
操作鏈接：網頁鏈接

方法二：
（1）使用Underscore.js：操作鏈接：網頁鏈接

（2）使用Immutable.js：操作鏈接：網頁鏈接

（3）使用UUID、Base64、Chance：操作鏈接：網頁鏈接

擴展微信小程序框架功能（1）——Promise

ES6 對 Promise 有了原生的支持，但微信開發者工具更新版本（0.11.112200）後, 移除了開發者工具對 ES6 中Promise 特性原生的支持, 需要引入第三方的 Promise 庫。

擴展微信小程序框架功能（2）——Generator
Generator函數是ES6提供的一種非同步編程解決方案，語法行為與傳統函數完全不同。

擴展微信小程序框架功能（3）——函數功能增強
Underscore.js 和 Lodash 是最常用的JavaScript庫。

擴展微信小程序框架功能（4）——Immutable.js
Immutable.js 是 Facebook 開發的不可變數據集合。Immutable
Data（不可變數據）一旦創建就不能被修改。通過使用Immutable
Data，可以更容易的處理緩存、回退、數據變化檢測等問題，應用開發更簡單。

擴展微信小程序框架功能（5）——Rex
Rex 是 JavaScript 狀態容器，提供可預測化的狀態管理。

擴展微信小程序框架功能（6）—日期時間
Moment.js是一個JavaScript的日期、時間處理工具類，其對於JavaScript的日期時間處理功能非常強悍和全面。可以用在瀏覽器環境中使用，也可以在Node.js中。

擴展微信小程序框架功能（7）——正則表達式
XRegExp 是一個開源的 JavaScript庫，提供一個參數化、可擴展的支持各種瀏覽器的正則表達式的實現庫，支持附加語法、標志以及方法。

擴展微信小程序框架功能（8）——Xml處理
x2js是一個 實現 XML 與 JavaScript 對象之間相互轉換的工具庫。

擴展微信小程序框架功能（9）——加解密
node-uuid可以快速地生成符合規范 的 UUID。js-base64可以實現Base64編碼和解碼。crypto-js可以非常方便地在 JavaScript 進行加解密。

擴展微信小程序框架功能（10）——測試輔助
Chance是一個 JavaScript 隨機數生成工具。Mock.js可以生成隨機數據，攔截 Ajax 請求。

方法三：moment
操作鏈接：網頁鏈接