小程序引入外部js

Ⅰ 小程序webview(H5)調用jsSDK功能指北

最核心的一個概念 :

小程序 的webview(H5頁面)中調用jssdk中的功能(比如獲取位置信息),需要有一個和小程序申請主體一致的 公眾號 賬號,在公眾號里去配置相關的jssdk信息.

1 小程序賬號

因為webview不支持個人類型,所以需要申請一個企業法人及個體工商戶類型的小程序賬號

2   公眾號賬號

要求小程序和公眾號的賬號對應的主體信息必須一致,有兩種途徑達到此目的:

先申請公眾號賬號,然後通過公眾號的快速生成小程序功能,生成步驟1的小程序賬號,這樣這兩個自然滿足同主體資格

登錄微信公眾號平台，點擊小程序管理-添加-快速注冊並認證小程序:

用和申請小程序賬號完全一致的主體信息去申請公眾號(主體類型,主體名稱,主體證件號),也能保證兩個賬號的主體資格一致(目前沒有小程序快速生成公眾號賬號的功能..)

3 域名綁定

這里需要兩個賬號都配置一下:

業務域名

首先webview指向一個外部網頁鏈接(我們的H5頁面)

<web-view src="https://abc.xxx.com.cn/cc/index.html"></web-view>

這個地址要滿足:

已經通過ICP備案域名

https協議

不支持自定義埠

不支持ip地址

不支持短鏈域名

那麼首先要在 小程序 中的'開發'-'開發設置'的'業務域名'中,將https://abc.xxx.com.cn配置進去:

JS介面安全域名

在上述h5頁面中,因為要調用jssdk的js文件:

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

因此要在公眾號設置」的「功能設置」里填寫「JS介面安全域名」

注意 :以上兩個配置地址時,都需要將配置時提供的一個文本文件按照要求上傳到H5頁面所在伺服器並確保能被訪問,用於騰訊驗證伺服器,否則是無法提交相關信息的

4 應用

jssdk提供了很多功能,但是webview中,只支持部分介面,自行查看web-view,這里以獲取位置信息為例:

通過config介面注入許可權驗證配置

所有需要使用JSSDK的頁面必須先注入配置信息，否則將無法調用:

wx.config({

appId: '', // 必填，公眾號的appid,注意不是小程序的appid

timestamp: , // 必填，生成簽名的時間戳

nonceStr: '', // 必填，生成簽名的隨機串

signature: '',// 必填，簽名

debug: true, // 選填,開啟調試模式,調用的所有api的返回值會在客戶端alert出來。

jsApiList: ['getLocation'] // 必填，需要使用的JS介面列表,這里為獲取位置信息

});

以上參數除了最後兩個,建議在後台服務中存儲和計算,具體需參考jssdk,主要思路:

利用公眾號的 appid 和 secret 去獲取 access_token

利用 access_token 去獲取 ticket

利用ticket和自行生成的( timestamp , nonceStr ,當前頁面的 地址 )計算出最終的 簽名

執行getLocation

以上步驟執行成功後,方可執行wx.getLocation:

var success=true

// 之所以這里有個success變數,是因為發現wx.error觸發也會調用wx.ready(如果有個wx.success就好了)

//但其實這並不完美,因為還發現有時候wx.ready先執行,然後觸發了wx.error ........

wx.ready(function(){

if(success){

wx.getLocation({

type: 'wgs84',

success(res) {

// res為坐標位置信息

},

fail(e) {

// 獲取失敗

}

})

}

// config信息驗證後會執行ready方法

});

wx.error(function(res){

success=false

// config信息驗證失敗會執行error函數

});

吐槽:

wx.config有時候成功,有時候說簽名失敗

wx.ready代表配置驗證完畢了,不代表驗證成功了,那他的意義在於什麼

reference:

jssdk: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

web-view: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

Ⅱ 微信小程序開發者工具如何在js中導入圖片

1、首先預備好外部想要引入的外部文件，命名為util.js,並且填充固定的文件內容(普通是固定的庫)。
2、其次打開util.js ，持續填寫重要內容將要利用的方法用mole.exports給暴顯露來。
3、然後將外部js放在指定的文件夾utils里(utils 規定寄存js庫和數字格式化文件)。
4、最後在想要用到這個方法的js裡面 require這個js，然後調用即可。

Ⅲ 微信小程序 怎麼用第三方js庫 jquery

方法一：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
操作鏈接：網頁鏈接

Ⅳ 小程序如何使用linq.js,在小程序中引用linq.js後運行報錯

我沒用過linq.js，但我可以肯定的是這種前端框架肯定是不能用於小程序的。小程序雖然是基於瀏覽器內核的，但它的腳本是繞過網頁DOM結構直接操作內核的，也就是說你在小程序中看到的界面並不是網頁，所以這種操作網頁DOM的js腳本都是不能用於小程序的

Ⅳ 小程序怎麼加在script標簽

後來在父目錄public創建一個eruda目錄在把B.js引入，PC控制台上沒有報錯信息，如
後來項目上線，h5項目是嵌褲雹搏到客戶的app裡面，客戶的app做了404文件的處理，導致在app打開我們的項目，出現報錯，但是報錯頁面也是偶然出現，有點難復現。
由於h5項目也要有微信小程序版本，任務緊，部分的功能使用web-view嵌入肆鋒h5頁面。用小程序打開h5項目時，vconsole-webpack-plugin插件的控制台總是打胡祥印沒有找到B.js文件。 用app去打開h5頁面則控制台沒有報錯。重新將B.js文件放到static目錄下，PC調試，控制台還是報Unexpected token '<'的錯誤。搜了一下說static裡面文件引用要用絕對路徑。如
發布到測試，再用小程序打開H5頁面，發現還是報錯，如
將引入方式改成最開始的引入方式，發布後再用小程序打開h5頁面，發現報錯如下
根據報錯信息，發現路徑少了static目錄，應該是https:/fo****p/static/eruda-1.2.2.min.js。將引入方式改為下圖。
發布後，再用微信小程序打開的h5頁面發現沒有報錯了，用PC調試的控制台也沒有報錯。這路徑是我沒有細想。是我想當然，相對路徑是當前相對引入文件的路徑。 A.js是項目首頁html通過下圖方式引入。
而A.js通過下圖方式引入B.js文件。
所以script中src的相對路徑理應相對的是引入A.js文件的html文件，而不是相對A.js文件，只有A.js被html引入後才有window.document，而且window.document是html內的。 對於public建一個eruda目錄還是報沒有找到，是因為public下的eruda目錄的內容並不會在「npm run build」自動加到打完的包里，需要每次打完包後將eruda復制到打完包里或者配置webpack將eruda目錄加到包里，而本地調試沒有經過打包時可以正確找到B.js文件。我忘記復制eruda目錄，webpack也沒有配置。不知道為什麼發布的項目，在app內通過vconsole-webpack-plugin插件沒有看到錯誤列印信息，而用小程序去打開h5頁面vconsole-webpack-plugin插件控制台就會報錯。

Ⅵ 怎麼把AngularJS開發的頁面遷移到微信小程序

把AngularJS開發的頁面遷移到微信小程序
目錄遷移
1、每個子模塊頁面換成Pages目錄下的一個子目錄，目錄命名就是原子模塊名。
2、原來的通用css、image、fonts等靜態資源統一移到resource目錄下，需要使用時，對於css樣式文件，在對應子模塊的wxss文件首部通過import命令引入；
替換規則
1、div需統一轉換成View；
2、ng-show統一轉換為wx:if；
3、ng-click統一轉換為bindtap；
4、ng-repeat統一用wx:for替換；
5、ng-class中的樣式選擇性綁定可以直接把條件綁定語句嵌入class屬性；
js代碼
模塊級代碼遷移： 可將模塊級作用域使用的通用邏輯搬到app.js中，通過app對象來引用；或者定義一個util模塊，來做動態引入； 對於原生與h5交互時用到的自定義事件，需要根據具體場景做處理。
子模塊級代碼遷移：
可將Angular子模塊代碼直接遷移到小程序對應Page對象中，當然，對於Angular特定語法的$***對象（例如$scope、$rootscope）的操作，需要做全局替換，替換原則是：
1、$scope:與Page對象同生命周期內的$scope，可以直接替換成this；而對於非同一生命周期的（最常見的即是各種callback回調函數），需要將Page對象在方法外做引用保存（例如var self=this），然後在回調函數中使用。
2、$rootScope:推薦放入app對象中引用，或者自定義通用模塊，然後動態引入；
3、數據模型：各頁面中建立的數據模型，直接放入***.json文件中，如果涉及Angular特定語法的操作，可參考上述兩點的做法進行替換；
4、jsonp請求：將jsonp請求統一替換成wx.request請求，只是原來的鏈式寫法要換成參數型寫法；
5、子模塊間的頁面跳轉，$state.go統一替換成wx.navigateTo或wx.navigateBack；

Ⅶ 微信小程序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

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

Ⅸ uniapp導入小程序出現js

出現js因為是沖御導入的小程序中使用了相對路徑引用JS文件，而在uni-app中相對路徑的引用方式與小程序不同，所以會出現找不到JS文件的情況。解決這個問題的方法是將小程序散洞岩中使用相對路徑引用的JS文件改為顫亂絕對路徑引用，或者使用uni-app中的相對路徑引用方式。

Ⅹ 微信小程序外部js執行自動調用某些代碼

這個簡單，主要要使用 小程序的生命周期函數，然後利用模塊化載入得方式，將外部js引入，在不同的生命周期階段調用即可。