微信小程序開發(fā)工具模塊化開發(fā)（小程序 模塊）
今天給各位分享微信小程序開發(fā)工具模塊化開發(fā)的知識(shí)，其中也會(huì)對(duì)小程序 模塊進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開始吧！
微信小程序藍(lán)牙模塊開發(fā)
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
const util = require('../../utils/util.js')
const bletool = require('../../utils/bletool.js')
Page({
data: {
// lists: [{ 'order_no': '1111', 'car_no': '321', 'car_type': '尚好捷', 'order_date': '2018-01-02 08:00', 'order_money': '16.00', 'order_time': '4' }],
car_no: '',
order_no: '',
lists: [],
bleList: [], //藍(lán)牙設(shè)備數(shù)組
serviceId: '',//592B3370-3900-9A71-4535-35D4212D2837
serviceMac: '',//C9:9B:4C:E7:DE:10
service_psd: '',//855525B837253705595800000329
service_uuid: '',
deviceId:'',
characteristics:[] //特征值
},
onLoad: function (options) {
this.initBle();
},
onReady: function () {
// 頁(yè)面渲染完成
},
onShow: function () {
if (app.globalData.car_no.length0){
this.getDeviceInfo();
}
},
onHide: function () {
// 頁(yè)面隱藏
},
onUnload: function () {
// 頁(yè)面關(guān)閉
app.globalData.car_no=''
},
//藍(lán)牙相關(guān)
//初始化藍(lán)牙
initBle: function () {
var that = this;
wx.onBluetoothAdapterStateChange(function (res) {
console.log('adapterState changed, now is', res)
app.globalData.ble_state = res.available;
if (res.available) {
that.initBle();
} else {
util.showToast('手機(jī)藍(lán)牙已關(guān)閉');
app.globalData.ble_isonnectting = false;
}
})
//打開藍(lán)牙適配器
wx.openBluetoothAdapter({
success: function (res) {
console.log('打開藍(lán)牙適配器成功');
that.getBluetoothAdapterState();
app.globalData.ble_state = true;
that.onBluetoothDeviceFound();
},
fail: function (res) {
// fail
console.log(res)
util.showToast('請(qǐng)打開手機(jī)藍(lán)牙');
},
complete: function (res) {
// complete
}
})
},
onBluetoothDeviceFound:function(){
var that = this;
//監(jiān)聽掃描
wx.onBluetoothDeviceFound(function (res) {
// res電腦模擬器返回的為數(shù)組；手機(jī)返回的為藍(lán)牙設(shè)備對(duì)象
console.log('監(jiān)聽搜索新設(shè)備：', res);
that.updateBleList([res])
})
},
getBluetoothAdapterState: function () {
var that = this;
wx.getBluetoothAdapterState({
success: function (res) {
var available = res.available;
var discovering = res.discovering;
if (!available) {
util.showToast('藍(lán)牙不可用');
} else {
if (!discovering) {
// that.startBluetoothDevicesDiscovery();
}
}
}
})
},
startBluetoothDevicesDiscovery: function () {
var that = this;
var services = [];
services.push(this.data.serviceId);
wx.showLoading({
title: '設(shè)備搜索中'
});
setTimeout(function () {
wx.hideLoading();
if (app.globalData.deviceId.length==0){
util.showModal('設(shè)備搜索失敗，請(qǐng)重試');
}
}, 10000)
if(bletool.isIOS()){
wx.startBluetoothDevicesDiscovery({
services: services,
allowDuplicatesKey: true,
success: function (res) {
console.log('ios搜索成功');
console.log(res);
},
fail: function (err) {
console.log(err);
}
});
}else{
wx.startBluetoothDevicesDiscovery({
// services: services,
allowDuplicatesKey: true,
success: function (res) {
console.log('Android搜索成功');
console.log(res);
},
fail: function (err) {
console.log(err);
wx.hideLoading();
that.startBluetoothDevicesDiscovery();
// that.getBluetoothAdapterState();
util.showToast('搜索失敗');
}
});
}
},
startConnectDevices: function (ltype, array) {
var that = this;
clearTimeout(that.getConnectedTimer);
that.getConnectedTimer = null;
wx.stopBluetoothDevicesDiscovery({
success: function (res) {
// success
}
})
app.globalData.ble_isonnectting = true;
console.log('連接前：'+that.deviceId);
wx.createBLEConnection({
deviceId: that.deviceId,
success: function (res) {
if (res.errCode == 0) {
console.log('連接成功：');
that.getService(that.deviceId);
}
},
fail: function (err) {
console.log('連接失敗：', err);
wx.hideLoading();
util.showModal('設(shè)備連接失敗，請(qǐng)重試');
// if (ltype == 'loop') {
// that.connectDeviceIndex += 1;
// that.loopConnect(array);
// } else {
// that.startBluetoothDevicesDiscovery();
// that.getConnectedBluetoothDevices();
// }
app.globalData.ble_isonnectting = false;
},
complete: function () {
}
});
},
getService: function (deviceId) {
var that = this;
// 監(jiān)聽藍(lán)牙連接
wx.onBLEConnectionStateChange(function (res) {
console.log(res);
app.globalData.ble_isonnectting = res.connected
if (!res.connected) {
util.showToast('連接斷開');
}
});
// 獲取藍(lán)牙設(shè)備service值
wx.getBLEDeviceServices({
deviceId: deviceId,
success: function (res) {
console.log('獲取藍(lán)牙設(shè)備service值');
console.log(res);
that.getCharacter(deviceId, res.services);
}
})
},
getCharacter: function (deviceId, services) {
var that = this;
services.forEach(function (value, index, array) {
if (value.isPrimary) {
that.setData({
service_uuid: value.uuid,
deviceId: deviceId
})
app.globalData.service_uuid= value.uuid;
app.globalData.deviceId=deviceId;
}
});
//監(jiān)聽通知
wx.onBLECharacteristicValueChange(function (res) {
// callback
console.log('value change', res)
const hex = bletool.buf2char(res.value)
console.log('返回的數(shù)據(jù)：', hex)
//配對(duì)密碼
if (hex.indexOf('855800000106') != -1) {
wx.hideLoading();
var charact_write = that.data.characteristics[1]
bletool.writeDataToDevice(that.data.deviceId, that.data.service_uuid, charact_write, that.data.service_psd);
wx.showToast({
title: '設(shè)備已連接',
icon: 'success',
duration: 3000
})
setTimeout(function () {
bletool.writeDataToDevice(that.data.deviceId, that.data.service_uuid, charact_write, '235525B837253705590400000273');
}, 2000)
} else if (hex.indexOf('23040000') != -1) {
//啟動(dòng)成功
that.starRenting();
}
})
wx.getBLEDeviceCharacteristics({
deviceId: deviceId,
serviceId: that.getServiceUUID(),
success: function (res) {
wx.getBLEDeviceCharacteristics({
deviceId: deviceId,
serviceId: that.getServiceUUID(),
success: function (res) {
console.log('特征', res)
that.setData({
characteristics:res.characteristics
})
app.globalData.characteristics = res.characteristics;
var charact_read = res.characteristics[0]
},
loopConnect: function (devicesId) {
var that = this;
var listLen = devicesId.length;
if (devicesId[this.connectDeviceIndex]) {
this.deviceId = devicesId[this.connectDeviceIndex];
this.startConnectDevices('loop', devicesId);
} else {
console.log('已配對(duì)的設(shè)備小程序藍(lán)牙連接失敗');
that.startBluetoothDevicesDiscovery();
that.getConnectedBluetoothDevices();
}
},
//更新數(shù)據(jù) devices為數(shù)組類型
updateBleList: function (devices) {
console.log('設(shè)備數(shù)據(jù)：',devices);
var newData = this.data.bleList
var that = this
var tempDevice = null;
for (var i = 0; i devices.length; i++) {
//ios設(shè)備
if (devices[i].devices != null) {
if (devices[i].devices.length 0) {
tempDevice = devices[i].devices[0];
}
else {
continue
}
}
//安卓
else {
tempDevice = devices[i];
}
if (!this.isExist(tempDevice)) {
newData.push(tempDevice)
}
}
console.log('數(shù)據(jù)：');
console.log(newData)
this.setData({
bleList: newData
})
if (!app.globalData.ble_isonnectting) {
var that = this;
this.data.bleList.forEach(function (value, index, array) {
//找到對(duì)應(yīng)id的設(shè)備，ios判斷服務(wù)id安卓判斷mac地址
var deviceId = value['deviceId'];
if(bletool.isIOS()){
let advertisServiceUUID = value['advertisServiceUUIDs'][0];
if (advertisServiceUUID == that.data.serviceId.toUpperCase()){
that.deviceId = deviceId;
console.log(that.deviceId);
that.startConnectDevices();
}
}else{
if (deviceId == that.data.serviceMac) {
that.deviceId = deviceId;
console.log(that.deviceId);
that.startConnectDevices();
}
}
});
}
},
//是否已存在 存在返回true 否則false
isExist: function (device) {
var tempData = this.data.bleList
for (var i = 0; i tempData.length; i++) {
if (tempData[i].deviceId == device.deviceId) {
return true
}
}
return false
},
//服務(wù)uuid
getServiceUUID: function () {
return bletool.stringTransition(this.data.service_uuid);
},
getDeviceInfo: function () {
let car_no = app.globalData.car_no;
var that = this;
wx.request({
url: app.globalData.serverURL + '?c=cara=getDeviceInfoopen_id=' + app.globalData.open_id + 'car_no=' + car_no,
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: { 'content-type': 'application/json' }, // 設(shè)置請(qǐng)求的 header
success: function (res) {
// success
var data = res.data;
console.log(data);
if (data.result == 1) {
app.globalData.serviceId = data.data.service_id;
app.globalData.serviceMac = data.data.service_mac,
app.globalData.service_psd = '85' + data.data.service_psd + '5800000329';
that.setData({
serviceId: data.data.service_id,
serviceMac: data.data.service_mac,
service_psd: '85' + data.data.service_psd+'5800000329',
})
app.startBluetoothDevicesDiscovery();
// that.onBLECharacteristicValueChange();
} else {
util.showModal(data.msg);
}
},
fail: function () {
},
complete: function () {
// complete
}
});
},
})
微信小程序之自定義模態(tài)彈窗（帶動(dòng)畫）實(shí)例
首先看看官方提供的模態(tài)彈窗
api如下：
示例：
這樣的模態(tài)彈窗，充其量只能做個(gè)alert，提示一下信息。
但是并不能使用它來(lái)處理復(fù)雜性的彈窗業(yè)務(wù)，因此寫了Michael從新自定義了一個(gè)，采用了仿原生的樣式寫法
wxml****：
wxss：
js:
相關(guān)連接：
------------------------------------------------------------
微信開發(fā)者工具的快捷鍵
微信小程序的文件結(jié)構(gòu) —— 微信小程序教程系列（1）
微信小程序的生命周期實(shí)例演示 —— 微信小程序教程系列（2）
微信小程序的動(dòng)態(tài)修改視圖層的數(shù)據(jù) —— 微信小程序教程系列（3）
微信小程序的新建頁(yè)面 —— 微信小程序教程系列（4）
微信小程序的如何使用全局屬性 —— 微信小程序教程系列（5）
微信小程序的頁(yè)面跳轉(zhuǎn) —— 微信小程序教程系列（6）
微信小程序標(biāo)題欄和導(dǎo)航欄的設(shè)置 —— 微信小程序教程系列（7）
微信小程序的作用域和模塊化 —— 微信小程序教程系列（8）
微信小程序視圖層的數(shù)據(jù)綁定 —— 微信小程序教程系列（9）
微信小程序視圖層的條件渲染 —— 微信小程序教程系列（10）
微信小程序視圖層的列表渲染 —— 微信小程序教程系列（11）
微信小程序視圖層的模板 —— 微信小程序教程系列（12）
微信小程序之wxss —— 微信小程序教程系列（13）
微信小程序的網(wǎng)絡(luò)請(qǐng)求 —— 微信小程序教程系列（14）
微信小程序的百度地圖獲取地理位置 —— 微信小程序教程系列（15）
微信小程序使用百度api獲取天氣信息 —— 微信小程序教程系列（16）
微信小程序獲取系統(tǒng)日期和時(shí)間 —— 微信小程序教程系列（17）
微信小程序之上拉加載和下拉刷新 —— 微信小程序教程系列（18）
微信小程序之組件 —— 微信小程序教程系列（19）
微信小程序之微信登陸 —— 微信小程序教程系列（20）
------------------------------------------------------------
微信小程序之頂部導(dǎo)航欄實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（1）
微信小程序之上拉加載（分頁(yè)加載）實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（2）
微信小程序之輪播圖實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（3）
微信小程序之仿android fragment之可滑動(dòng)的底部導(dǎo)航欄實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（4）
微信小程序之登錄頁(yè)實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（5）
微信小程序之自定義toast實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（6）
微信小程序之自定義抽屜菜單（從下拉出）實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（7）
微信小程序之自定義模態(tài)彈窗（帶動(dòng)畫）實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（8）
------------------------------------------------------------
微信小程序之側(cè)欄分類 —— 微信小程序?qū)崙?zhàn)商城系列（1）
微信小程序之仿淘寶分類入口 —— 微信小程序?qū)崙?zhàn)商城系列（2）
微信小程序之購(gòu)物數(shù)量加減 —— 微信小程序?qū)崙?zhàn)商城系列（3）
微信小程序之商品屬性分類 —— 微信小程序?qū)崙?zhàn)商城系列（4）
微信小程序之購(gòu)物車 —— 微信小程序?qū)崙?zhàn)商城系列（5）
未完待續(xù)。。。
更多小程序的教程：
謝謝觀看，不足之處，敬請(qǐng)指導(dǎo)
小程序開發(fā)流程有哪些？
1.
在微信公眾平臺(tái)上，注冊(cè)一個(gè)小程序賬號(hào)。根據(jù)注冊(cè)指引填寫相應(yīng)信息，提交相應(yīng)的資料。
如果你有認(rèn)證過(guò)的微信公眾號(hào)，可以直接在公眾號(hào)后臺(tái)迅速創(chuàng)建小程序，選擇小程序管理——快速注冊(cè)并認(rèn)證小程序就行了。
2.
注冊(cè)好賬號(hào)后，登錄小程序。在后臺(tái)設(shè)置好小程序的名稱、頭像、服務(wù)類目等信息，提交后等待微信審核。
在菜單“設(shè)置”-“開發(fā)設(shè)置”中你會(huì)看到小程序的 AppID 。小程序的 AppID 相當(dāng)于小程序平臺(tái)的一個(gè)身份證，后續(xù)你會(huì)在很多地方要用到它。
3.
接下來(lái)，你就要使用工具來(lái)制作小程序主體了，這也是小程序開發(fā)上線流程中最重要的一步。這一步有兩種方法，第一種方法適合有代碼基礎(chǔ)的人；第二種適合不懂代碼的小白。
（1）適合碼農(nóng)的方法
對(duì)于碼農(nóng)來(lái)說(shuō)，需要安裝微信官方開發(fā)者工具，然后根據(jù)自己的操作系統(tǒng)下載對(duì)應(yīng)的安裝包，有關(guān)開發(fā)者工具更詳細(xì)的介紹可以查看《開發(fā)者工具介紹》。
安裝好后，新建小程序項(xiàng)目，選擇代碼存放的硬盤路徑，填入剛剛申請(qǐng)到的小程序的 AppID，給你的項(xiàng)目起一個(gè)名字，再勾選“創(chuàng)建 QuickStart 項(xiàng)目”，就可以開始制作自己的小程序了。有什么不懂的，可以參考開發(fā)者官方文檔。
（2）適合小白的方法
對(duì)于不懂代碼的小白來(lái)說(shuō)，最好使用市面上的第三方小程序開發(fā)工具，這樣可以讓你無(wú)需代碼知識(shí)也能快速制作小程序。比如當(dāng)下不少商家會(huì)選擇「上線了」，有各種類型的小程序模板，包括電商、點(diǎn)餐、服務(wù)預(yù)約、文章、電子名片、展示、酒店預(yù)訂等。具體操作很簡(jiǎn)單：
以電商版小程序?yàn)槔?，直接選中一個(gè)喜歡的模板，在模板上添加新的商品，在【商店設(shè)置】中可以設(shè)置商品分類。
在【風(fēng)格和分頁(yè)設(shè)計(jì)】里，可以選擇喜歡的主題顏色，自定義導(dǎo)航欄；添加自己需要的各種功能版塊，比如輪播圖、快捷按鈕、標(biāo)題、分類組合、商品列表、各種優(yōu)惠活動(dòng)等等。
如果你還有什么不懂的，可以隨時(shí)咨詢系統(tǒng)客服，或者看一些小程序開發(fā)教程視頻，獲得更多細(xì)節(jié)。做完后，點(diǎn)擊左下角“立即發(fā)布”就可以了。
以上就是微信小程序的開發(fā)流程了，如果你需要展示的內(nèi)容不多，基本十來(lái)分鐘就能做好。小程序無(wú)論對(duì)商家還是個(gè)人幫助都很大，制作一個(gè)屬于自己的小程序，也是件很有用的事。
麥口科技如何定制開發(fā)或快速模板模塊化微信小程序？
小程序的定制開發(fā)可以選擇一些一鍵生成的小程序。
微塵小程序就是如此的，拖拽就可以生成。
關(guān)于微信小程序開發(fā)工具模塊化開發(fā)和小程序 模塊的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。
