首页 > 编程知识 正文

uniapp调试js,uniapp调试工具

时间:2024-03-07 18:23:22 阅读:331785 作者:NLZD

本文目录一览:

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" );

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。