uniapp調試js,uniapp調試工具

本文目錄一覽：

• 1、uniapp中調用微信jssdk
• 2、uni-app使用Vue.js
• 3、uniapp自定義基座調試要排隊嗎
• 4、uni-app中使用微信js-sdk(個人筆記)
• 5、uni-app的項目 真機調試時 用到js的indexOf方法判斷數組是否含有某個元素不生效 還有其他方法嗎？

uniapp中調用微信jssdk

1、安裝

“`

npm install jweixin-module –save

“`

2、創建文件share.wx.js

“`

// 引入微信jssdk

const jweixin = require(‘jweixin-module’)

const install = (Vue, vm) = {

// shareInfo: {

// title: ‘標題’,

// desc: ‘描述’,

// link: location.origin,

// imgUrl: ”

// }

const init = (shareInfo = {}) = {

// 獲取微信jssdk，用於分享

vm.$u.api.getWxjssdk({

url: location.href

}).then(res = {

res = res.data

vm.$u.vuex(‘vuex_wxjssdk’, res)

console.log(res)

jweixin.config({

debug: res.debug, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。

appId: res.appId, // 必填，公眾號的唯一標識

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

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

signature: res.signature, // 必填，簽名

jsApiList: res.jsApiList // 必填，需要使用的JS接口列表

});

jweixin.ready(() = {

console.log(shareInfo.title)

// 分享給朋友

jweixin.updateAppMessageShareData({

title: shareInfo.title,

desc: shareInfo.desc,

link: shareInfo.link,

imgUrl: shareInfo.imgUrl,

success: () = {

// 設置成功

}

})

// 分享到朋友圈

jweixin.updateTimelineShareData({

title: shareInfo.title,

link: shareInfo.link,

imgUrl: shareInfo.imgUrl,

success: () = {

// 設置成功

}

})

// 分享到朋友圈

jweixin.onMenuShareTimeline({

title: shareInfo.title,

link: shareInfo.link,

imgUrl: shareInfo.imgUrl,

success: () = {

}

})

// 分享給朋友

jweixin.onMenuShareAppMessage({

title: shareInfo.title,

desc: shareInfo.desc,

link: shareInfo.link,

imgUrl: shareInfo.imgUrl,

success: () = {

}

})

});

jweixin.error(function(res) {

// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這裡更新簽名。

console.log(res)

});

})

};

// 將各個定義的接口名稱，統一放進對象掛載到vm.$u.api(因為vm就是this，也即this.$u.api)下

vm.$u.share = {

init

};

}

export default {

install

}

“`

3、main.js   app.$mount() 上面加入

“`

// 微信jssdk初始化

import wxshare from ‘@/common/share.wx.js’

Vue.use(wxshare, app)

“`

4、調用

“`

this.$u.share.init({

title: ‘標題’,

desc: ‘描述’,

link: location.origin,

imgUrl: ‘分享圖片地址’

})

“`

uni-app使用Vue.js

說明 ：uni-app基於 Vue 2.0 實現，開發者需注意Vue 1.0 – 2.0 的使用差異，詳見 從 Vue 1.x 遷移 。

uni-app不僅支持應用生命周期和頁面生命周期，還支持 vue 實例的如下生命周期函數：

注意 ：不要在選項屬性或回調上使用箭頭函數，比如 created: () = console.log(this.a) 或 vm.$watch(‘a’, newValue = this.myMethod())。因為箭頭函數是和父級上下文綁定在一起的，this 不會是如你做預期的 Vue 實例，且 this.a 或 this.myMethod 也會是未定義的。

幾乎全支持 Vue官方文檔：模板語法 ，下面講下不支持的情況。

(1)不支持純HTML

uni-app的非H5端里所有的 BOM／DOM 都不能用，也就是說 v-html 指令不能用，可以使用 rich-text組件 代替。或者使用三方組件wxparse，在hello uni-app中有示例。

(2)不支持部分複雜的 JavaScript 渲染表達式

非H5端無法支持複雜的 JavaScript 表達式。目前可以使用的有 + – * % ?: ! == === [] .，剩下的還待完善。

(3)不支持過濾器

編譯到 App 和小程序平台時不支持使用過濾器，可以使用計算屬性（computed）提前計算出數據（如果是數組類型，就提前計算整個數組），用以代替過濾器。

備註 ： 自HBuilderX 1.7.1起，在微信小程序平台支持使用過濾器。

data 必須聲明為返回一個初始數據對象的函數；否則頁面關閉時，數據不會自動銷毀，再次打開該頁面時，會顯示上次數據。

注意 ：在微信小程序端，uni-app 將數據綁定功能委託給Vue，開發者需按Vue 2.0的寫法實現數據綁定，不支持微信小程序的數據綁定寫法，故如下寫法不支持：

需修改為：

支持 Vue官方文檔：計算屬性 。

實現全局變量的方式需要遵循 Vue 單文件模式的開發規範。詳細參考： uni-app全局變量的幾種實現方式 。

非H5端不支持在 template 內使用 methods 中的函數。

備註 ： 自HBuilderX 1.7.1起，在微信小程序平台支持支持在 template 內使用 methods 中的函數。

為節約性能，我們將 Class 與 Style 的表達式通過 compiler 硬編碼到 uni-app 中。

全支持 Vue官方文檔：條件渲染 。

全支持vue列表渲染 Vue官方文檔：列表渲染 。只是需要注意一點，嵌套列表渲染，必須指定不同的索引！需要填寫 :key=”xx” 。

注意 ：同級多個 v-for 時 key 的值是不允許重複的，key 的綁定是不支持表達式的，需要按照以下方式處理。

幾乎全支持 Vue官方文檔：事件處理器 。事件映射表如下所示：

注意 ：

(1)事件映射表中沒有的原生事件也可以使用，例如map組件的regionchange 事件直接在組件上寫成 @regionchange,同時這個事件也非常特殊，它的 event type 有 begin 和 end 兩個，導致我們無法在handleProxy 中區分到底是什麼事件，所以你在監聽此類事件的時候同時監聽事件名和事件類型既 map @regionchange=”functionName” @end=”functionName” @begin=”functionName”map。

(2)為兼容各端，事件需使用 v-on 或 @ 的方式綁定，請勿使用小程序端的bind 和 catch 進行事件綁定。

(3)事件修飾符

(4)若需要禁止蒙版下的頁面滾動，可使用 @touchmove.stop.prevent=”moveHandle”，moveHandle 可以用來處理 touchmove 的事件，也可以是一個空函數。

(5)按鍵修飾符：uni-app運行在手機端，沒有鍵盤事件，所以不支持按鍵修飾符。

支持 Vue官方文檔：表單控件綁定 。建議開發過程中直接使用 uni-app：表單組件 。用法示例：

(1)H5 的select 標籤用 picker 組件進行代替

(2)表單元素 radio 用 radio-group 組件進行代替

組件是整個 Vue.js 中最複雜的部分，支持 Vue官方文檔：組件 。有且只能使用單文件組件（.vue 組件）的形式進行支持。其他的諸如：動態組件，自定義 render ，和 script type=”text/x-template” 字符串模版等非H5端都不支持。詳細的非H5端不支持列表：

(1)暫不支持在組件引用時，在組件上定義 click 等原生事件、v-show（可用 v-if 代替）和 class style 等樣式屬性(例：card class=”class-name” /card 樣式是不會生效的)。

Slot（scoped 暫時還沒做支持）

(2)動態組件

(3)異步組件

(4)inline-template

(5)X-Templates

(6)keep-alive

(7)transition

(8)class

(9)style

(10)組件里使用 slot 嵌套的其他組件時不支持 v-for

uni-app提供了豐富的 UI組件 ，比如： picker , map 等，需要注意的是原生組件上的事件綁定，需要以 vue 的事件綁定語法來綁定，如 bindchange=”eventName” 事件，需要寫成 @change=”eventName” 。如:

uni-app 支持配置全局組件，需在 main.js 里進行全局註冊，註冊後就可在所有頁面里使用該組件。 注意 ：Vue.component 的第一個參數必須是靜態的字符串。示例：

(1)main.js 里進行全局註冊

(2)index.vue 里可直接使用組件

在 uni-app 中以下這些作為保留關鍵字，不可作為組件名。

備註 ：除以上列表中的名稱外，標準的 HTML 及 SVG 標籤名也不能作為組件名。

(1) 如何獲取上個頁面傳遞的數據

在 onLoad 里得到，onLoad 的參數是其他頁面打開當前頁面所傳遞的數據。

(2) 如何設置全局的數據和全局的方法

uni-app內置了 vuex ，在app里的使用，可參考 hello-uniapp 的 store/index.js 。

(3)如何捕獲 app 的 onError

由於 onError 並不是完整意義的生命周期，所以只提供一個捕獲錯誤的方法，在 app 的根組件上添加名為 onError 的回調函數即可。如下：

(4)組件屬性設置不生效解決辦法

當重複設置某些屬性為相同的值時，不會同步到view層。 例如：每次將scroll-view組件的scroll-top屬性值設置為0，只有第一次能順利返回頂部。 這和props的單向數據流特性有關，組件內部scroll-top的實際值改動後，其綁定的屬性並不會一同變化。解決辦法有兩種（以scroll-view組件為例）：

備註 ：第二種解決方式在某些組件可能造成抖動，推薦第一種解決方式。

uniapp自定義基座調試要排隊嗎

不需要排隊。

uniapp自定義基座調試按照正常的流程就可以。首先需要確定是否有使用原生插件。也就是說：

打開項目vue文件——點擊運行——選擇運行手機或模擬器——選擇運行基座選擇——選擇自定義基座調試。

點擊運行——選擇運行手機或模擬器——選擇製作自定義調式基座——如圖選擇進行打包——打包成功以後將包發送到手機上完成安裝。

點擊運行——選擇運行手機或模擬器——運行到Android App基座——如果沒有連接手機需要連接手機（打開usb調式以及開發者工具）選擇對應要調試的手機編號——即可進行自定義基座調試。

uniapp是一個使用Vue.js開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、Web響應式、以及各種小程序，比如微信、支付寶、百度、頭條、QQ、釘釘、淘寶、快應用等多個平台。

uni-app中使用微信js-sdk(個人筆記)

通過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優質的網頁體驗。

例子為在vue中使用微信JS-SDK，步驟如下：

先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

備註：登錄後可在“開發者中心”查看對應的接口權限。

插件方式：

引入js文件方式：

在需要調用JS接口的頁面引入如下JS文件，（支持https）：

掛載到Vue原型

與使用 JS-SDK 配置方式相同，所有需要使用開放標籤的頁面必須先注入配置信息，並通過openTagList字段申請所需要的開放標籤，否則將無法使用（同一個 url 僅需調用一次）。開放標籤的申請和 JS 接口的申請相互獨立，因此是可以同時申請的。

配置成功之後，就可以使用相關的api了。例子為微信支付。

uni-app的項目 真機調試時 用到js的indexOf方法判斷數組是否含有某個元素不生效 還有其他方法嗎？

具體結構你的問題：

比如數組[“abc”,”efg”]，你認為它包含”a”字符嗎？如果是這樣，代碼可以這麼寫：

function isContained( arr , char ){ return arr.join(”).indexOf( char ) -1;}//testisContained( [“abc”, “efg”] , “a” );