微信小程序上線新版scroll-view組件 體驗(yàn)更絲滑最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>小程序方面
1)優(yōu)化藍(lán)牙主機(jī)接口的報(bào)錯(cuò)信息,需關(guān)注藍(lán)牙主機(jī)接口是否表現(xiàn)正常;
2)修復(fù) TCP 連接斷開(kāi)后偶現(xiàn) crash 的問(wèn)題。
小游戲方面
1)修復(fù) TCP 連接斷開(kāi)后偶現(xiàn) crash 的問(wèn)題;
2)修復(fù) WebAudio 多線程情況下的閃退問(wèn)題,需關(guān)注穩(wěn)定性;
3)修復(fù) WebAudio BufferSourceNode.stop 沒(méi)有對(duì)齊標(biāo)準(zhǔn)的問(wèn)題。
此外,微信官方宣布為小程序推出新版 scroll-view 組件,快速滑動(dòng)不白屏、滾動(dòng)頁(yè)面不抖動(dòng)、反向滾動(dòng)更絲滑。
1)減少通信時(shí)間:無(wú)需通過(guò) JSBridge 轉(zhuǎn)換邏輯層與渲染層的通信,減少大量通信時(shí)間開(kāi)銷;
2)避免白屏:渲染采用同步光柵化,滾動(dòng)與渲染在同一線程,避免白屏情況;
3)減少內(nèi)存占用:優(yōu)化長(zhǎng)列表節(jié)點(diǎn)渲染,僅渲染在屏節(jié)點(diǎn),減少內(nèi)存占用;
4)降低開(kāi)發(fā)成本:無(wú)需開(kāi)發(fā)者自行優(yōu)化渲染節(jié)點(diǎn)問(wèn)題,降低開(kāi)發(fā)成本。
注:新版scroll-view組件支持安卓 8.0.28 / iOS 8.0.30 以上版本,且需要小程序開(kāi)發(fā)者進(jìn)行適配。
微信小程序上線新版scroll-view組件 體驗(yàn)更絲滑最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>微信小程序scroll-view組件部分屬性及參數(shù)即將調(diào)整最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>1、廢棄在安卓端的 scroll-view 組件的 fast-deceleration 屬性。廢棄后該屬性對(duì)應(yīng)的交互將失效,并且退回至默認(rèn)滾動(dòng)行為。scroll-view 組件的其他屬性可正常使用。
2、廢棄在安卓端的 ScrollViewContext.scrollTo 接口的 duration 及 velocity 參數(shù)。ScrollViewContext.scrollTo 接口的其他參數(shù)可正常使用。
即使在小程序不適配的情況下,上述調(diào)整不會(huì)影響用戶的正常使用流程。iOS端不受本次調(diào)整影響。
微信小程序scroll-view組件部分屬性及參數(shù)即將調(diào)整最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>微信小程序如何引入擴(kuò)展組件庫(kù)最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>微信小程序引入擴(kuò)展組件庫(kù)操作教程
1、在微信開(kāi)發(fā)者工具中,點(diǎn)擊詳情–>本地設(shè)置,勾選使用npm模塊;
2、在微信開(kāi)發(fā)者工具中點(diǎn)擊工具–>點(diǎn)擊構(gòu)建npm;
3、在要引入頁(yè)面的 json 文件中加入 usingComponents 字段;
{
“usingComponents”: {
“mp-tabs”: “@miniprogram-component-plus/tabs”
}
}
4、在頁(yè)面 wxml 中使用該組件即可。
<mp-tabs
tabs=”{{tabs}}”
activeTab=”{{activeTab}}”
bindtabclick=”onTabCLick”
>
<block wx:for=”{{tabs}}” wx:key=”title”>
<view class=”tab-content” slot=”tab-content-{{index}}” > {{item.title}} </view>
</block>
</mp-tabs>
微信小程序如何引入擴(kuò)展組件庫(kù)最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>微信小程序scroll-view組件介紹最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>主要屬性:
使用演示:
wxml:
需要注意的是,注意滾動(dòng)視圖垂直滾動(dòng)時(shí)一定要設(shè)置高度否則的話scroll-view不會(huì)生效,通過(guò)WXSS設(shè)置height。微信小程序scroll-view組件屬性的長(zhǎng)度單位默認(rèn)為px,2.4.0起支持傳入單位(rpx/px)。
微信小程序scroll-view組件介紹最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>如何提升微信小程序在移動(dòng)端的操作體驗(yàn)最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>1、減少輸入
手機(jī)觸屏鍵盤(pán)區(qū)域小且密集,輸入困難的同時(shí)還易引起輸入錯(cuò)誤,因此在設(shè)計(jì)小程序頁(yè)面時(shí)應(yīng)盡量減少用戶輸入,利用現(xiàn)有接口或其他一些易于操作的選擇控件來(lái)改善用戶輸入的體驗(yàn)。
如下圖中在添加銀行卡時(shí),采用攝像頭識(shí)別接口來(lái)幫助用戶輸入。除此之外微信團(tuán)隊(duì)還對(duì)外開(kāi)放例如地理位置接口等多種微信小程序接口 ,充分利用這些接口將大大提高用戶輸入的效率和準(zhǔn)確性,進(jìn)而優(yōu)化體驗(yàn)。
除了利用接口外,在不得不讓用戶進(jìn)行手動(dòng)輸入時(shí),應(yīng)盡量讓用戶做選擇而不是鍵盤(pán)輸入。
一方面,回憶易于記憶,讓用戶在有限的選項(xiàng)中做選擇通常來(lái)說(shuō)是容易于完全靠記憶輸入;另一方面,仍然是考慮到手機(jī)鍵盤(pán)密集的單鍵輸入極易造成輸入錯(cuò)誤。例如圖中,在用戶搜索時(shí)提供搜索歷史快捷選項(xiàng)將幫助用戶快速進(jìn)行搜索,而減少或避免不必要的鍵盤(pán)輸入。
2、 避免誤操作
因?yàn)樵谑謾C(jī)上我們通過(guò)手指觸摸屏幕來(lái)操控界面,手指的點(diǎn)擊精確度遠(yuǎn)不如鼠標(biāo),因此在設(shè)計(jì)頁(yè)面上需點(diǎn)擊的控件時(shí),需要充分考慮到其熱區(qū)面積,避免由于可點(diǎn)擊區(qū)域過(guò)小或過(guò)于密集而造成誤操作。
當(dāng)簡(jiǎn)單地將原本在電腦屏幕上使用的界面不做任何適配直接移植到手機(jī)上時(shí),往往就容易出現(xiàn)這樣的問(wèn)題。由于手機(jī)屏幕分辨率各不相同,因此最適宜點(diǎn)擊像素尺寸也不完全一致,但換算成物理尺寸后大致是在7mm-9mm之間。
在微信提供的標(biāo)準(zhǔn)組件庫(kù)中,各種控件元素均已考慮到了頁(yè)面點(diǎn)擊效果以及不同屏幕的適配,因此再次推薦使用或模仿標(biāo)準(zhǔn)控件尺寸進(jìn)行設(shè)計(jì)。
3、利用接口提升性能
微信設(shè)計(jì)中心已推出了一套網(wǎng)頁(yè)標(biāo)準(zhǔn)控件庫(kù),包括sketch設(shè)計(jì)控件庫(kù)和Photoshop設(shè)計(jì)控件庫(kù),后續(xù)還將完善小程序組件,這些控件都已充分考慮了移動(dòng)端頁(yè)面的特點(diǎn),能夠保證其在移動(dòng)端頁(yè)面上的可用性和操作性能。
同時(shí)微信開(kāi)發(fā)團(tuán)隊(duì)也在不斷完善和擴(kuò)充微信小程序接口,并提供微信公共庫(kù),利用這些資源不但能夠?yàn)橛脩籼峁└涌旖莸姆?wù),而且對(duì)頁(yè)面性能的提高有極大作用,無(wú)形之中提升了用戶體驗(yàn)。
如何提升微信小程序在移動(dòng)端的操作體驗(yàn)最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>什么是微信小程序聯(lián)盟?怎么注冊(cè)和使用?最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>微信小程序聯(lián)盟為商家和推客分別提供了管理后臺(tái)和功能。商家可在后臺(tái)設(shè)置商品推廣傭金和查看推廣效果;推客可在后臺(tái)挑選商品,獲取推廣素材,查看推廣效果,提現(xiàn)傭金等。
微信小程序聯(lián)盟商家和推客端管理后臺(tái)效果圖:
小程序聯(lián)盟商家端
小程序聯(lián)盟推客端
微信小程序聯(lián)盟怎么注冊(cè)和使用?
如果您是小程序商家,滿足以下條件之一即可開(kāi)通小程序聯(lián)盟:
1、已開(kāi)張的企業(yè)/個(gè)體工商戶的小商店;
2、已有小程序并完成標(biāo)準(zhǔn)版交易組件接入。
小程序商家注冊(cè)地址:https://union.weixin.qq.com/mp/shop/login
如果您想做推客(推廣者),滿足以下條件即可注冊(cè)成為推客推廣:
支持企業(yè)/個(gè)體工商戶主體接入,通過(guò)主體認(rèn)證即可。 暫未向個(gè)人開(kāi)放。
推客注冊(cè)地址:https://union.weixin.qq.com/mp/promoter/login
微信小程序聯(lián)盟具有“先成交后付費(fèi)”的特點(diǎn),只有在推客完成推廣后才會(huì)結(jié)算。
什么是微信小程序聯(lián)盟?怎么注冊(cè)和使用?最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>基于wxcharts.js實(shí)現(xiàn)訂單統(tǒng)計(jì)報(bào)表的開(kāi)發(fā)實(shí)例最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>導(dǎo)入wxcharts.js:
將wxcharts.js 存放在utils目錄
column.wxml
<view class=”container”>
<!–標(biāo)題–>
<view class=”title”>
{{chartTitle}}
</view>
<!–繪制canvas–>
<canvas canvas-id=”columnCanvas” class=”canvas” bindtouchstart=”touchHandler”></canvas>
</view>
coumn.js
引入wxcharts.js
var wxCharts = require(‘../../../utils/wxcharts.js’);
初始化數(shù)據(jù)
var app = getApp();
var columnChart = null;
var chartData = {
main: {
title: ‘訂單統(tǒng)計(jì)’,
data: [23,28,35,54,95],
categories: [‘2013′,’2014′,’2015′,’2016′,’2017’]
}
};
加載報(bào)表數(shù)據(jù)
Page({
data: {
chartTitle: ‘總訂單’,
isMainChartDisplay: true
},
onReady: function (e) {
var windowWidth = 320;
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth;
} catch (e) {
console.error(‘getSystemInfoSync failed!’);
}
columnChart = new wxCharts({
canvasId: ‘columnCanvas’,
type: ‘column’,
animation: true,
categories: chartData.main.categories,
series: [{
name: ‘訂單量’,
color:’#188df0′,
data: chartData.main.data,
format: function (val,name) {
return val.toFixed(2) + ‘萬(wàn)’;
}
}],
yAxis: {
format: function (val) {
return val + ‘萬(wàn)’;
},
min: 0
},
xAxis: {
disableGrid: false,
type: ‘calibration’
},
extra: {
column: {
width: 15,
},
legendTextColor: ‘#000000’
},
width: windowWidth,
height: 200,
});
}
});
wx-charts微信小程序圖表插件訂單統(tǒng)計(jì)報(bào)表效果圖:
基于wxcharts.js實(shí)現(xiàn)訂單統(tǒng)計(jì)報(bào)表的開(kāi)發(fā)實(shí)例最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>wx-charts微信小程序圖表組件介紹最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>微信小程序圖表組件wx-charts是基于canvas繪制,支持圖表類型餅圖、線圖、柱狀圖、區(qū)域圖等圖表圖形繪制,而且體積小巧,是眾多微信小程序圖表組件中功能比較強(qiáng)大的一個(gè)。
效果圖
wx-charts支持圖表類型
餅圖 pie
圓環(huán)圖 ring
線圖 line
柱狀圖 column
區(qū)域圖 area
雷達(dá)圖 radar
wx-charts使用方法
1、直接引用編譯好的文件dist/wxcharts.js 或者 dist/wxcharts-min.js
2、自行編譯
git clone https://github.com/xiaolin3303/wx-charts.git
npm install rollup -g
npm install
rollup -c 或者 rollup –config rollup.config.prod.js
wx-charts參數(shù)說(shuō)明
opts Object
opts.canvasId String required 微信小程序canvas-id
opts.width Number required canvas寬度,單位為px
opts.height Number required canvas高度,單位為px
opts.type String required 圖表類型,可選值為pie, line, column, area
opts.categories Array required (餅圖不需要) 數(shù)據(jù)類別分類
opts.dataLabel Boolean default true 是否在圖表中顯示數(shù)據(jù)內(nèi)容值
opts.yAxis Object Y軸配置
opts.yAxis.format Function 自定義Y軸文案顯示
opts.yAxis.min Number Y軸起始值
opts.yAxis.title String Y軸title
opts.series Array required 數(shù)據(jù)列表
數(shù)據(jù)列表每項(xiàng)結(jié)構(gòu)定義
dataItem Object
dataItem.data Array required (餅圖為Number) 數(shù)據(jù)
dataItem.color String 例如#7cb5ec 不傳入則使用系統(tǒng)默認(rèn)配色方案
dataItem.name String 數(shù)據(jù)名稱
dateItem.format Function 自定義顯示數(shù)據(jù)內(nèi)容
wx-charts微信小程序圖表組件介紹最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>公眾號(hào)關(guān)注組件(official-account)介紹與使用注意事項(xiàng)最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>公眾號(hào)關(guān)注組件使用效果
公眾號(hào)關(guān)注組件使用方式:
<official-account></official-account>
公眾號(hào)關(guān)注組件使用注意事項(xiàng):
1、基礎(chǔ)庫(kù)2.3.0開(kāi)始支持,低版本需做兼容處理。
2、使用組件前,需前往小程序后臺(tái),在“設(shè)置”→“關(guān)注公眾號(hào)”中設(shè)置需要展示的公眾號(hào)。注:設(shè)置的公眾號(hào)需與小程序主體一致。
3、在一個(gè)小程序的生命周期內(nèi),只有從以下場(chǎng)景進(jìn)入小程序,才具有展示引導(dǎo)關(guān)注公眾號(hào)組件的能力:
(1)當(dāng)小程序從掃小程序碼場(chǎng)景(場(chǎng)景值1047,場(chǎng)景值1124)打開(kāi)時(shí);
(2)當(dāng)小程序從聊天頂部場(chǎng)景(場(chǎng)景值1089)中的「最近使用」內(nèi)打開(kāi)時(shí),若小程序之前未被銷毀,則該組件保持上一次打開(kāi)小程序時(shí)的狀態(tài);
(3)當(dāng)從其他小程序返回小程序(場(chǎng)景值1038)時(shí),若小程序之前未被銷毀,則該組件保持上一次打開(kāi)小程序時(shí)的狀態(tài)。
4、為便于小程序制作開(kāi)發(fā)人員調(diào)試,基礎(chǔ)庫(kù) 2.7.3 版本起開(kāi)發(fā)版小程序增加以下場(chǎng)景展示公眾號(hào)組件:開(kāi)發(fā)版小程序從掃二維碼(場(chǎng)景值 1011)打開(kāi) — 體驗(yàn)版小程序打開(kāi)
5、組件限定最小寬度為300px,高度為定值84px。
6、每個(gè)頁(yè)面只能配置一個(gè)該組件。
在使用official-account公眾號(hào)關(guān)注組件時(shí),如果遇到錯(cuò)誤,建議去微信官方社區(qū)提問(wèn)并交流。
公眾號(hào)關(guān)注組件(official-account)介紹與使用注意事項(xiàng)最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>微信小程序跳轉(zhuǎn)到公眾號(hào)可以嗎?最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>首先,得看你的小程序支持不支持。如果你是從小程序服務(wù)商那購(gòu)買或制作的,可以咨詢下是否支持跳轉(zhuǎn),如果不支持那就沒(méi)有辦法了。只能建議在明顯的位置提示關(guān)注公眾號(hào)了。
但是,對(duì)于小程序制作開(kāi)發(fā)人員來(lái)說(shuō),自己開(kāi)發(fā)的小程序可以通過(guò)官方提供的official-account公眾號(hào)關(guān)注組件來(lái)實(shí)現(xiàn)跳轉(zhuǎn)。當(dāng)用戶掃小程序打開(kāi)小程序時(shí),開(kāi)發(fā)者可在小程序內(nèi)配置公眾號(hào)關(guān)注組件,方便用戶快捷關(guān)注公眾號(hào),可嵌套在原生組件內(nèi)。
關(guān)于公眾號(hào)關(guān)注組件的使用,參考official-account公眾號(hào)關(guān)注組件介紹。
需要注意的是,設(shè)置的公眾號(hào)必須與小程序主體一致才行。
所以微信小程序跳轉(zhuǎn)到公眾號(hào)是否可以得看小程序是不是支持這個(gè)功能,開(kāi)發(fā)人員可以添加公眾號(hào)關(guān)注組件來(lái)實(shí)現(xiàn)小程序跳轉(zhuǎn)到公眾號(hào)。
微信小程序跳轉(zhuǎn)到公眾號(hào)可以嗎?最先出現(xiàn)在微信小程序觀察網(wǎng)。
]]>