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