media-choice為媒體資源選擇組件，基于KnockoutJs。支持圖片、語音、視頻、圖文的選擇以及預覽，支持默認選擇類型，支持是否禁用選擇類型的更改。

使用示例：

<script id="media_idTemplate" type="text/html"><media-choice-button params="value: media_id"></media-choice-button></script><script id="newsTemplate" type="text/html"><media-choice-button params="value: media_id,mediaType:5,disabledChoice:true"></media-choice-button></script>

參數說明：

value：微信公眾號媒體Id

mediaType：默認選擇的媒體類型，其中（0：圖片；1，語音；2，視頻；5，圖文）

disabledChoice：是否禁用選擇

效果：

全部代碼：

var instance = function (params, componentInfo) {var self = this;this.Name = ko.observable('請選擇素材');this.Url = ko.observable('/Content/patterns/congruent_pentagon.png');this.Id = ko.observable('');//默認選擇的類型this.MediaType = ko.observable('1');//是否禁用選擇框this.DisabledChoice = ko.observable(false);//訂閱 self.MediaType.subscribe(function (newValue) {console.debug(newValue);self.Name('請選擇素材');self.Url('/Content/patterns/congruent_pentagon.png');self.Id('');});this.ShowChoiceWindow = function (data) {var type = self.MediaType();var url = '';switch (type) {//圖文case "5":url = '/Site_News?resourceType=5&lightLayout=1';break;//圖片case "0":url = '/Site_Resources?resourceType=0&lightLayout=1';break;//語音case "1":url = '/Site_Resources?resourceType=1&lightLayout=1';break;//視頻case "2":url = '/Site_Resources?resourceType=2&lightLayout=1';break;}mwc.window.show('選擇素材', url);}if (params && typeof (params.value()) == 'string') {params.value.subscribe(function (newValue) {self.Id(newValue);});if (params.value().length > 0) {self.Id(params.value());mwc.restApi.get({//請求地址url: '/Site_Resources/GetJsonDataByMediaId/' + self.Id(),//是否鎖定UIisBlockUI: true,//可選，鎖定元素 blockUI: componentInfo.element,//成功函數success: function (model) {console.debug(model);var data = model.FileBase;if (data == null) {return;}self.MediaType(model.ResourceType);//一定要放后面，不然因為觸發了訂閱事件而導致相關數據被清空 self.Name(data.Name);if (data.FrontCoverImageUrl)self.Url(data.FrontCoverImageUrl);elseself.Url(data.Url == null ? data.SiteUrl : data.Url);self.Id(data.MediaId);console.debug(ko.toJS(self));}});}if (params.mediaType) {self.MediaType(params.mediaType);}if (params.disabledChoice) {self.DisabledChoice(params.disabledChoice);}}window.choice = function (data) {params.value(data.MediaId);self.Id(data.MediaId);self.Name(data.Name);if (data.FrontCoverImageUrl) {self.Url(data.FrontCoverImageUrl);} elseself.Url(data.Url == null ? data.SiteUrl : data.Url);} }; var newschoiceViewModelInstance = {createViewModel: function (params, componentInfo) {return new instance(params, componentInfo);} }; //資源選擇 ko.components.register('media-choice-button', {viewModel: newschoiceViewModelInstance,template: '' +'<div class="form-group">' +'<label class="col-sm-2 control-label">類型：</label>' +'<div class="col-sm-10">' +'<select class="form-control" data-bind="value:MediaType,disable:DisabledChoice" data-val="true" data-val-required="類型 字段是必需的。">' +'<option value="0">圖片</option>' +'<option value="1">語音</option>' +'<option value="2">視頻</option>' +'<option value="5">圖文</option>' +'</select>' +'</div>' +'</div>' +'<div class="form-group">' +'<div class="col-sm-12">' +'<div>' +'<div class="panel panel-default" data-bind="click:ShowChoiceWindow">' +'<div class="panel-body" id="content">' +'<p data-bind="if:MediaType()==0">' +'<img style="width:150px;height:100px" data-bind="attr:{src:Url}" />' +'</p>' +'<p data-bind="if:MediaType()==1 && Id()!=\'\'">' +'<audio style="width:250px;height:100px" controls="controls" data-bind="attr:{src:Url}" />' +'</p>' +'<p data-bind="if:MediaType()==2 && Id()!=\'\'">' +'<video style="height:100px !important;width:250px !important" controls="controls" data-bind="attr:{src:Url}" />' +'</p>' +'<p data-bind="if:MediaType()==5">' +'<img style="width:150px;height:100px" data-bind="attr:{src:Url}" />' +'</p>' +'<div>' +'<p data-bind="text:Name">' + '</p>' +'</div>' +'<!-- ko if:Id()==\"\" && "1,2".indexOf(MediaType())!=-1 -->' +'<p>' +'<a class="btn btn-primary btn-block m-t" data-bind="click:$root.ShowChoiceWindow">'+ '<i class="fa fa-plus">' + '</i>選擇素材</a>' +'</p>' +'<!-- /ko -->' +'</div>' +'</div>' +'</div>' +'</div>' +'</div>' });

總結

以上是生活随笔為你收集整理的Magicodes.WeiChat——媒体资源选择组件之media-choice（开源）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。