微信小程序開發(fā)工具模塊化開發(fā)（微信小程序模板開發(fā)）
本篇文章給大家談?wù)勎⑿判〕绦蜷_發(fā)工具模塊化開發(fā)，以及微信小程序模板開發(fā)對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。
本文目錄一覽：
- 1、超市O2O微信小程序模式如何定制開發(fā)？
- 2、麥口科技如何定制開發(fā)或快速模板模塊化微信小程序？
- 3、微信小程序之自定義模態(tài)彈窗（帶動(dòng)畫）實(shí)例
- 4、開發(fā)一套微信小程序要多少錢？
- 5、微信小程序藍(lán)牙模塊開發(fā)
- 6、微信小程序模塊化開發(fā)哪家好
超市O2O微信小程序模式如何定制開發(fā)？
超市O2O微信小程序開發(fā)主要有三種模式：
第一種，基于現(xiàn)成模板進(jìn)行編輯的模式。
這種模式下，模板是最為首要的，用戶首先選擇一個(gè)最為接近需求的模板，然后采用編輯、配置的方式對(duì)模板的名字、標(biāo)題、欄目名稱/數(shù)量、圖片等進(jìn)行修改。
優(yōu)點(diǎn)
快，非常簡(jiǎn)單，如果圖片素材等提前準(zhǔn)備到位了，通過模板編輯配置的模式開發(fā)微信小程序，一般1、2個(gè)小時(shí)就能搞定！
缺點(diǎn)
1）找到匹配度足夠滿意的模板并不容易：這種模式比較依賴于模板供應(yīng)方的模板庫豐富程度，一般來說，最終用戶的需求都是千變?nèi)f化的，往往都是各有各的訴求，即便模板平臺(tái)方提供的模板數(shù)量很豐富，卻仍然會(huì)經(jīng)常出現(xiàn)找遍了模板庫也找不到滿意的恰當(dāng)?shù)哪０宓那闆r。
2）幾乎沒法做較深度的個(gè)性化定制：一旦希望做點(diǎn)比換圖片、改標(biāo)題更復(fù)雜點(diǎn)的個(gè)性化擴(kuò)展，就會(huì)發(fā)現(xiàn)這種模式是一個(gè)死胡同，這種模式的工具里，幾乎沒有廠商能支持比較深度的功能個(gè)性化修改、定制。
第二種，模板+拖拽制作。
這種模式下，工具平臺(tái)方會(huì)提供一些比較典型的行業(yè)、場(chǎng)景模板，同時(shí)還會(huì)提供比較豐富的相關(guān)功能模塊，這些功能模塊可以自由“裝卸”到模板上去。模板比較全面地體現(xiàn)了相關(guān)類別小程序的整體框架，用戶基于該模板框架，結(jié)合自身的具體需求，通過拖拽方式對(duì)各種各樣的模塊進(jìn)行自由組合，從而實(shí)現(xiàn)各種各樣的個(gè)性化需求。
優(yōu)點(diǎn)
比較簡(jiǎn)單快捷，對(duì)制作者幾乎沒有技術(shù)背景的要求，同時(shí)還有比較大的個(gè)性化拓展可能性?；凇澳０?拖拽式制作”的模式做微信小程序開發(fā)，一般制作周期按天計(jì)算，2、3天能做出一個(gè)中等復(fù)雜度的小程序應(yīng)用。
缺點(diǎn)
這類模式的工具很容易做成"慢性毒藥"，具備一定麻痹性：對(duì)實(shí)際應(yīng)用場(chǎng)景而言，單純這種模式的個(gè)性化能力其實(shí)依然遠(yuǎn)遠(yuǎn)不夠；但由于往往呈現(xiàn)的是“能任意定制”的形象，所以這類工具其實(shí)很有麻痹性，用戶使用到后期往往有上了賊船的感覺——說好的自由定制呢？發(fā)現(xiàn)依舊很多地方不能改，依然這不能實(shí)現(xiàn)，那也沒法實(shí)現(xiàn)。而此時(shí)，往往已經(jīng)有相當(dāng)?shù)倪\(yùn)營(yíng)投入和數(shù)據(jù)沉淀，要想重頭再來找人從零開始幫另行定制一套，影響太大，傷筋動(dòng)骨??！
第三種，組件化的快速開發(fā)模式。
能到“組件化”這個(gè)層面，足以表明這種模式其實(shí)已經(jīng)開始頗有點(diǎn)專業(yè)開發(fā)的味道了。
這種模式下，主要特征是將各種比較通用的代碼模塊封裝成一個(gè)個(gè)組件，未來開發(fā)中不用重復(fù)編寫這些模塊的代碼，而是直接拖用組件。
優(yōu)點(diǎn)
因?yàn)槭窃诖a層面進(jìn)行開發(fā)，對(duì)小程序的功能實(shí)現(xiàn)有最大的掌控度。也是因?yàn)檫M(jìn)入了代碼層面，所以對(duì)于一些特殊需求的復(fù)雜小程序，就能根據(jù)需要隨時(shí)全面開展性能優(yōu)化了。此外，由于組件化，開發(fā)速度也還比較高。
缺點(diǎn)
難度大，需要有的一定的編碼基礎(chǔ)；完成一個(gè)小程序開發(fā)的時(shí)間一般都不短，即便比較成熟高效的可視化組件式開發(fā)工具，也得需要半個(gè)月之久。
麥口科技如何定制開發(fā)或快速模板模塊化微信小程序？
小程序的定制開發(fā)可以選擇一些一鍵生成的小程序。
微塵小程序就是如此的，拖拽就可以生成。
微信小程序之自定義模態(tài)彈窗（帶動(dòng)畫）實(shí)例
首先看看官方提供的模態(tài)彈窗
api如下：
示例：
這樣的模態(tài)彈窗，充其量只能做個(gè)alert，提示一下信息。
但是并不能使用它來處理復(fù)雜性的彈窗業(yè)務(wù)，因此寫了Michael從新自定義了一個(gè)，采用了仿原生的樣式寫法
wxml****：
wxss：
js:
相關(guān)連接：
------------------------------------------------------------
微信開發(fā)者工具的快捷鍵
微信小程序的文件結(jié)構(gòu) —— 微信小程序教程系列（1）
微信小程序的生命周期實(shí)例演示 —— 微信小程序教程系列（2）
微信小程序的動(dòng)態(tài)修改視圖層的數(shù)據(jù) —— 微信小程序教程系列（3）
微信小程序的新建頁面 —— 微信小程序教程系列（4）
微信小程序的如何使用全局屬性 —— 微信小程序教程系列（5）
微信小程序的頁面跳轉(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）
微信小程序之上拉加載（分頁加載）實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（2）
微信小程序之輪播圖實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（3）
微信小程序之仿android fragment之可滑動(dòng)的底部導(dǎo)航欄實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（4）
微信小程序之登錄頁實(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）
微信小程序之購物數(shù)量加減 —— 微信小程序?qū)崙?zhàn)商城系列（3）
微信小程序之商品屬性分類 —— 微信小程序?qū)崙?zhàn)商城系列（4）
微信小程序之購物車 —— 微信小程序?qū)崙?zhàn)商城系列（5）
未完待續(xù)。。。
更多小程序的教程：
謝謝觀看，不足之處，敬請(qǐng)指導(dǎo)
開發(fā)一套微信小程序要多少錢？
開發(fā)一個(gè)微信小程序大概要花多少錢，主要還是看你的實(shí)際需求來，一般市場(chǎng)做小程序主要有這三種方式。
1.行業(yè)模板
根據(jù)不同行業(yè)需求開發(fā)的行業(yè)模板，各行業(yè)用戶可以選擇適合自己的模板一鍵開啟使用，并支持上百種營(yíng)銷插件，滿足商家的日常功能需求。行業(yè)模板套餐價(jià)格是首年4999元，買一年送一年。
2.模板定制
提供個(gè)性化模板定制服務(wù)，用戶可以根據(jù)自己的需求定制個(gè)性化首頁風(fēng)格及商品詳情頁，同時(shí)增加用戶所需的個(gè)性化營(yíng)銷插件，讓商家的小程序獨(dú)一無二。模板個(gè)性化定制套餐價(jià)格是首年是8999元，買一年送一年。
3.企業(yè)開發(fā)
可以根據(jù)企業(yè)客戶的具體需求，針對(duì)品牌企業(yè)在發(fā)展過程中遇到的“效率、品牌、營(yíng)銷及數(shù)據(jù)”等四大難題，進(jìn)行需求分析定位、用戶體驗(yàn)設(shè)計(jì)及功能架構(gòu)規(guī)劃等，最終提供量身定制的小程序解決方案。大客戶模板開發(fā)費(fèi)用需根據(jù)客戶的具體需求報(bào)價(jià)。
微信小程序藍(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 () {
// 頁面渲染完成
},
onShow: function () {
if (app.globalData.car_no.length0){
this.getDeviceInfo();
}
},
onHide: function () {
// 頁面隱藏
},
onUnload: function () {
// 頁面關(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
}
});
},
})
微信小程序模塊化開發(fā)哪家好
小程序開發(fā)已經(jīng)活躍了很長(zhǎng)一段時(shí)間，然而還是有很多人并不熟知，所以才會(huì)讓有心人有機(jī)可乘。需要記住的是微信小程序沒有官方的第三方開發(fā)平臺(tái)！小程序開發(fā)行業(yè)非常繁雜，很多公司都能做，但選擇專業(yè)的小程序開發(fā)公司，這一點(diǎn)非常重要就要擦亮眼睛來選擇了。
選擇平臺(tái)除了合同細(xì)節(jié)，還一定要了解清楚這家公司的背景口碑，多看看公司開發(fā)的成功案例,看做的成功案例與自己心目中的網(wǎng)站效果是否一致。有豐富的開發(fā)微信小程序的經(jīng)驗(yàn)，能根據(jù)客戶的要求設(shè)計(jì)出一套別具風(fēng)格的網(wǎng)站,還可根據(jù)用戶的體驗(yàn)上做出合理的頁面布局調(diào)整和功能結(jié)構(gòu)調(diào)整,讓平臺(tái)增加在同行業(yè)的核心競(jìng)爭(zhēng)力。
另外建議：購買時(shí)不光要產(chǎn)品好、公司好、售后服務(wù)也要好。在微信小程序網(wǎng)站在運(yùn)行中總會(huì)有各種各樣的問題,如平臺(tái)的前后臺(tái)操作、網(wǎng)站運(yùn)營(yíng)中出現(xiàn)的系統(tǒng)問題及漏洞等各種問題,開發(fā)公司能否及時(shí)有效的解決,這些都是我們?cè)谫徺I系統(tǒng)選擇服務(wù)公司的一個(gè)重要考核點(diǎn)。
總之，天上不會(huì)掉餡餅，不要總想著占便宜，鉆空子。跟一次付款終身免費(fèi)維護(hù)相比，那些后期收一定維護(hù)費(fèi)的小程序開發(fā)商能提供更好的產(chǎn)品和服務(wù)更有信服力。具體哪家好，需要自己親自體驗(yàn)。
關(guān)于微信小程序開發(fā)工具模塊化開發(fā)和微信小程序模板開發(fā)的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。
