微信小程序怎么设置点图片跳转到别一个页面

1、在微信开发者工具中，打开appjson文件，在pages数组中增加showwxml页面相关文件的代码，以加粗显示，代码如下：

{

"pages":[

"pages/index/index",

"pages/show/show",

"pages/logs/logs"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#ccc",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle":"black"

}

}

2、在indexwxml文件中，在类为usermotto的view组件中添加绑定属性catchtap='enterShow'，以加粗显示，代码如下：

<!--indexwxml-->

<view class="container">

<view class="userinfo">

<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

<block wx:else>

<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfoavatarUrl}}" background-size="cover"></image>

<text class="userinfo-nickname">{{userInfonickName}}</text>

</block>

</view>

<view class="usermotto" catchtap='enterShow'>

<text class="user-motto">{{motto}}</text>

</view>

</view>

3、在indexjs文件中，将data中motto的值改为“点击进入”。编写实现跳转的自定义函数enterShow，加粗显示，代码如下：

//indexjs

//获取应用实例

const app = getApp()

Page({

data: {

motto: '点击进入',

userInfo: {},

hasUserInfo: false,

canIUse: wxcanIUse('buttonopen-typegetUserInfo')

},

//事件处理函数

enterShow:function(){

wxnavigateTo({

url: '/show/show',

})

4、 在showwxml中，输入跳转后页面显示的信息，代码如下：

<view>

<text>这是跳转后的页面</text>

</view>

5、然后在indexxwml中点击测试就可以了。

说明：在上面的页面跳转自定义函数enterShow中，也可以使用wxredirectTo实现跳转。两者的区别:redirectTo将关闭当前页面，跳转到指定页面，页面左上角没有返回的箭头按钮；而navigateTo将保留页面，跳转到指定页面，页面左上角有返回的箭头按钮。

扩展资料

其实在小程序后台很早就有个wxopenUrl的函数，普通开发者没有调用权限，这次微信给自家的小程序开放权限，旨在测试这一功能可能的风险。因为这一功能如果全部开放，将会给小程序用户带来很大的安全隐患。居心不良的开发者可能会将用户引流至一些不安全页面。

小程序的审核难度也会变得很大。因为微信除了审核小程序本身的页面跳转和内容，还需要审核外链的链接，并且还不一定能够审核清楚。

注册开发者账号： >

#使用mpvue 开发小程序过程中 简单介绍一下微信小程序蓝牙连接过程

#在蓝牙连接的过程中部分api需要加定时器延时1秒到2秒左右再执行，原因为何不知道，小程序有这样的要求

#1首先是要初始化蓝牙：openBluetoothAdapter()

```js

if (wxopenBluetoothAdapter) {

wxopenBluetoothAdapter({

        success: function(res) {

            / 获取本机的蓝牙状态 /

            setTimeout(() => {

                getBluetoothAdapterState()

            }, 1000)

        },

        fail: function(err) {

            // 初始化失败

        }

    })

    } else {    

    }

```

#2检测本机蓝牙是否可用：

#  要在上述的初始化蓝牙成功之后回调里调用

```js

getBluetoothAdapterState() {

    var that= this;

    thattoastTitle= '检查蓝牙状态'

wxgetBluetoothAdapterState({

        success: function(res) {

startBluetoothDevicesDiscovery()

},

        fail(res) {

            consolelog(res)

}

})

}

```

#3 开始搜索蓝牙设备：

```js

startBluetoothDevicesDiscovery() {

    var that= this;

    setTimeout(() => {

wxstartBluetoothDevicesDiscovery({

            success: function(res) {

/ 获取蓝牙设备列表 /

                thatgetBluetoothDevices()

},

            fail(res) {

}

})

}, 1000)

}

```

#4 获取搜索到的蓝牙设备列表

# / thatdeviceName 是获取到的蓝牙设备的名称， 因为蓝牙设备在安卓和苹果手机上搜到的蓝牙地址显示是不一样的，所以根据设备名称匹配蓝牙/

```js

getBluetoothDevices() {

    var that= this;

    setTimeout(() => {

wxgetBluetoothDevices({

            services: [],

            allowDuplicatesKey: false,

            interval: 0,

            success: function(res) {

                if (resdeviceslength> 0) {

                    if (JSONstringify(resdevices)indexOf(thatdeviceName) !== -1) {

                        for (let i = 0; i < resdeviceslength; i++) {

                            if (thatdeviceName === resdevices[i]name) {

/ 根据指定的蓝牙设备名称匹配到deviceId /

                                thatdeviceId = thatdevices[i]deviceId;

                                setTimeout(() => {

                                    thatconnectTO();

}, 2000);

};

};

} else {

}

} else {

}

},

            fail(res) {

                consolelog(res, '获取蓝牙设备列表失败=====')

}

})

}, 2000)

},

```

#5连接蓝牙

# 匹配到的蓝牙设备ID 发送连接蓝牙的请求， 连接成功之后 应该断开蓝牙搜索的api，然后去获取所连接蓝牙设备的service服务

```js

connectTO() {

wxcreateBLEConnection({

        deviceId: deviceId,

        success: function(res) {

            thatconnectedDeviceId = deviceId;

/ 4获取连接设备的service服务 /

thatgetBLEDeviceServices();

wxstopBluetoothDevicesDiscovery({

                success: function(res) {

                    consolelog(res, '停止搜索')

},

                fail(res) {

}

})

},

        fail: function(res) {

}

})

}

```

#6 获取蓝牙设备的service服务,获取的serviceId有多个要试着连接最终确定哪个是稳定版本的service 获取服务完后获取设备特征值

```js

getBLEDeviceServices() {

    setTimeout(() => {

wxgetBLEDeviceServices({

            deviceId: thatconnectedDeviceId,

            success: function(res) {

                thatservices= resservices

/ 获取连接设备的所有特征值 /

thatgetBLEDeviceCharacteristics()

},

            fail: (res) => {

}

})

}, 2000)

},

```

#7获取蓝牙设备特征值

# 获取到的特征值有多个，最后要用的事能读，能写，能监听的那个值的uuid作为特征值id，

```js

getBLEDeviceCharacteristics() {

            setTimeout(() => {

wxgetBLEDeviceCharacteristics({

                    deviceId: connectedDeviceId,

                    serviceId: services[2]uuid,

                    success: function(res) {

                        for (var i = 0; i < rescharacteristicslength; i++) {

                            if ((rescharacteristics[i]propertiesnotify || rescharacteristics[i]propertiesindicate) &&

                                (rescharacteristics[i]propertiesread && rescharacteristics[i]propertieswrite)) {

                                consolelog(rescharacteristics[i]uuid, '蓝牙特征值 ==========')

/ 获取蓝牙特征值 /

                                thatnotifyCharacteristicsId = rescharacteristics[i]uuid

// 启用低功耗蓝牙设备特征值变化时的 notify 功能

thatnotifyBLECharacteristicValueChange()

}

}

},

                    fail: function(res) {

}

})

}, 1000)

},

```

#8启动notify 蓝牙监听功能 然后使用 wxonBLECharacteristicValueChange用来监听蓝牙设备传递数据

#接收到的数据和发送的数据必须是二级制数据， 页面展示的时候需要进行转换

```js

notifyBLECharacteristicValueChange() { // 启用低功耗蓝牙设备特征值变化时的 notify 功能

            var that= this;

            consolelog('6启用低功耗蓝牙设备特征值变化时的 notify 功能')

wxnotifyBLECharacteristicValueChange({

                state: true,

                deviceId: thatconnectedDeviceId,

                serviceId: thatnotifyServicweId,

                characteristicId: thatnotifyCharacteristicsId,

                complete(res) {

/用来监听手机蓝牙设备的数据变化/

wxonBLECharacteristicValueChange(function(res) {

//

                        thatbalanceData += thatbuf2string(resvalue)

                        thathexstr += thatreceiveData(resvalue)

})

},

                fail(res) {

                    consolelog(res, '启用低功耗蓝牙设备监听失败')

                    thatmeasuringTip(res)

}

})

},

/转换成需要的格式/

buf2string(buffer) {

                    var arr = Arrayprototypemapcall(new Uint8Array(buffer), x => x)

                    return arrmap((char, i) => {

                        return StringfromCharCode(char);

                    })join('');

},

receiveData(buf) {

return thishexCharCodeToStr(thisab2hex(buf))

},

/转成二进制/

ab2hex (buffer) {

              var hexArr = Arrayprototypemapcall(

                  new Uint8Array(buffer), function (bit) {

                      return ('00' + bittoString(16))slice(-2)

}

)

              return hexArrjoin('')

},

/转成可展会的文字/

hexCharCodeToStr(hexCharCodeStr) {

              var trimedStr = hexCharCodeStrtrim();

              var rawStr = trimedStrsubstr(0, 2)toLowerCase() === '0x' trimedStrsubstr(2) : trimedStr;

              var len = rawStrlength;

              var curCharCode;

              var resultStr= [];

              for (var i = 0; i < len; i = i+ 2) {

                  curCharCode = parseInt(rawStrsubstr(i, 2), 16);

                  resultStrpush(StringfromCharCode(curCharCode));

}

              return resultStrjoin('');

},

```

# 向蓝牙设备发送数据

```js

sendData(str) {

    let that= this;

    let dataBuffer = new ArrayBuffer(strlength)

    let dataView = new DataView(dataBuffer)

    for (var i = 0; i < strlength; i++) {

        dataViewsetUint8(i, strcharAt(i)charCodeAt())

}

    let dataHex = thatab2hex(dataBuffer);

    thiswriteDatas = thathexCharCodeToStr(dataHex);

wxwriteBLECharacteristicValue({

        deviceId: thatconnectedDeviceId,

        serviceId: thatnotifyServicweId,

        characteristicId: thatnotifyCharacteristicsId,

        value: dataBuffer,

        success: function (res) {

            consolelog('发送的数据：' + thatwriteDatas)

            consolelog('message发送成功')

},

        fail: function (res) {

},

        complete: function (res) {

}

})

},

```

# 当不需要连接蓝牙了后就要关闭蓝牙，并关闭蓝牙模块

```js

// 断开设备连接

closeConnect() {

if (thatconnectedDeviceId) {

wxcloseBLEConnection({

            deviceId: thatconnectedDeviceId,

            success: function(res) {

thatcloseBluetoothAdapter()

},

            fail(res) {

}

})

} else {

thatcloseBluetoothAdapter()

}

},

// 关闭蓝牙模块

closeBluetoothAdapter() {

wxcloseBluetoothAdapter({

        success: function(res) {

},

        fail: function(err) {

}

})

},

```

#在向蓝牙设备传递数据和接收数据的过程中，并未使用到read的API 不知道有没有潜在的问题，目前线上运行为发现任何的问题

#今天的蓝牙使用心得到此结束，谢谢

//indexjs

//获取应用实例

const app = getApp()

const util = require('//utils/utiljs')

const bletool = require('//utils/bletooljs')

Page({

data: {

// lists: [{ 'order_no': '1111', 'car_no': '321', 'car_type': '尚好捷', 'order_date': '2018-01-02 08:00', 'order_money': '1600', 'order_time': '4' }],

car_no: '',

order_no: '',

lists: [],

bleList: [], //蓝牙设备数组

serviceId: '',//592B3370-3900-9A71-4535-35D4212D2837

serviceMac: '',//C9:9B:4C:E7:DE:10

service_psd: '',//855525B837253705595800000329

service_uuid: '',

deviceId:'',

characteristics:[] //特征值

},

onLoad: function (options) {

thisinitBle();

},

onReady: function () {

// 页面渲染完成

},

onShow: function () {

if (appglobalDatacar_nolength>0){

thisgetDeviceInfo();

}

},

onHide: function () {

// 页面隐藏

},

onUnload: function () {

// 页面关闭

appglobalDatacar_no=''

},

//蓝牙相关

//初始化蓝牙

initBle: function () {

var that = this;

wxonBluetoothAdapterStateChange(function (res) {

consolelog('adapterState changed, now is', res)

appglobalDatable_state = resavailable;

if (resavailable) {

thatinitBle();

} else {

utilshowToast('手机蓝牙已关闭');

appglobalDatable_isonnectting = false;

}

})

//打开蓝牙适配器

wxopenBluetoothAdapter({

success: function (res) {

consolelog('打开蓝牙适配器成功');

thatgetBluetoothAdapterState();

appglobalDatable_state = true;

thatonBluetoothDeviceFound();

},

fail: function (res) {

// fail

consolelog(res)

utilshowToast('请打开手机蓝牙');

},

complete: function (res) {

// complete

}

})

},

onBluetoothDeviceFound:function(){

var that = this;

//监听扫描

wxonBluetoothDeviceFound(function (res) {

// res电脑模拟器返回的为数组；手机返回的为蓝牙设备对象

consolelog('监听搜索新设备：', res);

thatupdateBleList([res])

})

},

getBluetoothAdapterState: function () {

var that = this;

wxgetBluetoothAdapterState({

success: function (res) {

var available = resavailable;

var discovering = resdiscovering;

if (!available) {

utilshowToast('蓝牙不可用');

} else {

if (!discovering) {

// thatstartBluetoothDevicesDiscovery();

}

}

}

})

},

startBluetoothDevicesDiscovery: function () {

var that = this;

var services = [];

servicespush(thisdataserviceId);

wxshowLoading({

title: '设备搜索中'

});

setTimeout(function () {

wxhideLoading();

if (appglobalDatadeviceIdlength==0){

utilshowModal('设备搜索失败，请重试');

}

}, 10000)

if(bletoolisIOS()){

wxstartBluetoothDevicesDiscovery({

services: services,

allowDuplicatesKey: true,

success: function (res) {

consolelog('ios搜索成功');

consolelog(res);

},

fail: function (err) {

consolelog(err);

}

});

}else{

wxstartBluetoothDevicesDiscovery({

// services: services,

allowDuplicatesKey: true,

success: function (res) {

consolelog('Android搜索成功');

consolelog(res);

},

fail: function (err) {

consolelog(err);

wxhideLoading();

thatstartBluetoothDevicesDiscovery();

// thatgetBluetoothAdapterState();

utilshowToast('搜索失败');

}

});

}

},

startConnectDevices: function (ltype, array) {

var that = this;

clearTimeout(thatgetConnectedTimer);

thatgetConnectedTimer = null;

wxstopBluetoothDevicesDiscovery({

success: function (res) {

// success

}

})

appglobalDatable_isonnectting = true;

consolelog('连接前：'+thatdeviceId);

wxcreateBLEConnection({

deviceId: thatdeviceId,

success: function (res) {

if (reserrCode == 0) {

consolelog('连接成功：');

thatgetService(thatdeviceId);

}

},

fail: function (err) {

consolelog('连接失败：', err);

wxhideLoading();

utilshowModal('设备连接失败，请重试');

// if (ltype == 'loop') {

// thatconnectDeviceIndex += 1;

// thatloopConnect(array);

// } else {

// thatstartBluetoothDevicesDiscovery();

// thatgetConnectedBluetoothDevices();

// }

appglobalDatable_isonnectting = false;

},

complete: function () {

}

});

},

getService: function (deviceId) {

var that = this;

// 监听蓝牙连接

wxonBLEConnectionStateChange(function (res) {

consolelog(res);

appglobalDatable_isonnectting = resconnected

if (!resconnected) {

utilshowToast('连接断开');

}

});

// 获取蓝牙设备service值

wxgetBLEDeviceServices({

deviceId: deviceId,

success: function (res) {

consolelog('获取蓝牙设备service值');

consolelog(res);

thatgetCharacter(deviceId, resservices);

}

})

},

getCharacter: function (deviceId, services) {

var that = this;

servicesforEach(function (value, index, array) {

if (valueisPrimary) {

thatsetData({

service_uuid: valueuuid,

deviceId: deviceId

})

appglobalDataservice_uuid= valueuuid;

appglobalDatadeviceId=deviceId;

}

});

//监听通知

wxonBLECharacteristicValueChange(function (res) {

// callback

consolelog('value change', res)

const hex = bletoolbuf2char(resvalue)

consolelog('返回的数据：', hex)

//配对密码

if (hexindexOf('855800000106') != -1) {

wxhideLoading();

var charact_write = thatdatacharacteristics[1]

bletoolwriteDataToDevice(thatdatadeviceId, thatdataservice_uuid, charact_write, thatdataservice_psd);

wxshowToast({

title: '设备已连接',

icon: 'success',

duration: 3000

})

setTimeout(function () {

bletoolwriteDataToDevice(thatdatadeviceId, thatdataservice_uuid, charact_write, '235525B837253705590400000273');

}, 2000)

} else if (hexindexOf('23040000') != -1) {

//启动成功

thatstarRenting();

}

})

wxgetBLEDeviceCharacteristics({

deviceId: deviceId,

serviceId: thatgetServiceUUID(),

success: function (res) {

wxgetBLEDeviceCharacteristics({

deviceId: deviceId,

serviceId: thatgetServiceUUID(),

success: function (res) {

consolelog('特征', res)

thatsetData({

characteristics:rescharacteristics

})

appglobalDatacharacteristics = rescharacteristics;

var charact_read = rescharacteristics[0]

},

loopConnect: function (devicesId) {

var that = this;

var listLen = devicesIdlength;

if (devicesId[thisconnectDeviceIndex]) {

thisdeviceId = devicesId[thisconnectDeviceIndex];

thisstartConnectDevices('loop', devicesId);

} else {

consolelog('已配对的设备小程序蓝牙连接失败');

thatstartBluetoothDevicesDiscovery();

thatgetConnectedBluetoothDevices();

}

},

//更新数据 devices为数组类型

updateBleList: function (devices) {

consolelog('设备数据：',devices);

var newData = thisdatableList

var that = this

var tempDevice = null;

for (var i = 0; i < deviceslength; i++) {

//ios设备

if (devices[i]devices != null) {

if (devices[i]deviceslength > 0) {

tempDevice = devices[i]devices[0];

}

else {

continue

}

}

//安卓

else {

tempDevice = devices[i];

}

if (!thisisExist(tempDevice)) {

newDatapush(tempDevice)

}

}

consolelog('数据：');

consolelog(newData)

thissetData({

bleList: newData

})

if (!appglobalDatable_isonnectting) {

var that = this;

thisdatableListforEach(function (value, index, array) {

//找到对应id的设备，ios判断服务id安卓判断mac地址

var deviceId = value['deviceId'];

if(bletoolisIOS()){

let advertisServiceUUID = value['advertisServiceUUIDs'][0];

if (advertisServiceUUID == thatdataserviceIdtoUpperCase()){

thatdeviceId = deviceId;

consolelog(thatdeviceId);

thatstartConnectDevices();

}

}else{

if (deviceId == thatdataserviceMac) {

thatdeviceId = deviceId;

consolelog(thatdeviceId);

thatstartConnectDevices();

}

}

});

}

},

//是否已存在 存在返回true 否则false

isExist: function (device) {

var tempData = thisdatableList

for (var i = 0; i < tempDatalength; i++) {

if (tempData[i]deviceId == devicedeviceId) {

return true

}

}

return false

},

//服务uuid

getServiceUUID: function () {

return bletoolstringTransition(thisdataservice_uuid);

},

getDeviceInfo: function () {

let car_no = appglobalDatacar_no;

var that = this;

wxrequest({

url: appglobalDataserverURL + 'c=car&a=getDeviceInfo&open_id=' + appglobalDataopen_id + '&car_no=' + car_no,

method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

header: { 'content-type': 'application/json' }, // 设置请求的 header

success: function (res) {

// success

var data = resdata;

consolelog(data);

if (dataresult == 1) {

appglobalDataserviceId = datadataservice_id;

appglobalDataserviceMac = datadataservice_mac,

appglobalDataservice_psd = '85' + datadataservice_psd + '5800000329';

thatsetData({

serviceId: datadataservice_id,

serviceMac: datadataservice_mac,

service_psd: '85' + datadataservice_psd+'5800000329',

})

appstartBluetoothDevicesDiscovery();

// thatonBLECharacteristicValueChange();

} else {

utilshowModal(datamsg);

}

},

fail: function () {

},

complete: function () {

// complete

}

});

},

})

（1）使用本地缓存

（2）通过页面路由

在使用url进行参数传递时候，传递数据有字节限制，如果要传递对象，需要先把对象通过JSONstringify转换成字符串，接收或再通过JSONparse转换成对象

demo

<template is="模板名" data="数据对象" />

A页面跳转到B页面

页面传值

微信小程序 页面传值详解

一 跨页面传值

1 用 navigator标签传值或 wxnavigator, 比如

这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受

如果需要传多个参数, 用 & 链接即可

如果要传 数组, 字典等复杂类型, 要先用 JSONstringify() 转成字符串传递

注 : 如果转化的字符串中 有""这个符号, 则只会传递""以前的字符串, 这个问题我猜想可能是小程序内部的路由处理 对这个""敏感吧

好, 这是第一种 依靠跳转的url带参数传值

2 用getCurrentPages(); 获取栈中全部页面的, 然后把数据写入相应页面

这里可以传字符串, 也能传数组等,

这样就把 address 传递并接受了

注 : 这个方法适合 往后面传值(即已经存在的页面), 这样才能在栈中找到并主动写入数据, 且 一定要在 onshow() 方法中接受, 因为再次返回只执行onshow()方法

3 写入本地, 跨页面在取出来 wxsetStorage/wxgetStorage等, 小程序中对写入本地数据 封装了很多方法, 各有侧重, 这里就不多说了

4 把 数据声明为全局变量

var detail = getApp()detail; 可在任何页面获取

二 页内传值

1 设置id的方法标识跳转后传递后的参数

在bindtap定义的点击方法 swiperTap : function(e) ; 中获取, var id = ecurrentTargetid;

2 设置 data-xxx 的方法来标识要传递的值

注 : 这里 data-index="{{index}}" 里的 {{index}} 是有效的, 在用wx-for 渲染视图层时, index 代表点击的下标 在bindtap定义的点击方法 swiperTap : function(e) ; 中获取, 即 var index = ecurrentTargetdatasetindex; 其他的参数取出也如此, var type = ecurrentTargetdatasettype;

3 form表单和input输入框

方法1：A页面跳转链接添加参数，B页面onLoad 接收

方法2：设置全局变量 globalData，用的少，一般适用于全局共享的一份信息，如用户open_id等

因为小程序只获取了手机号。

1，其实只是获取了手机号，头像昵称是通过open-data组件展示，并没有真正获取。

2，需要二次授权。

3，需要自主更改。

像3这种情况很有可能是因为这个小程序没有写获取头像的程序，虽然都用一个接口，但是程序没有写。

以上就是关于微信小程序怎么设置点图片跳转到别一个页面全部的内容，包括:微信小程序怎么设置点图片跳转到别一个页面、微信小程序（上）、微信小程序蓝牙教程--完整版亲测等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！