如何实现小程序图片预览？

　　一般小程序在开发完之后都要预览一下，这样才能保证功能的正常使用，然后才能发布小程序。那么小程序图片预览要怎么开发呢?以下是流程及相关代码。

　　二.例子

　　1.wxml

　　[html] view plain copy

　　2.wxss

　　[html] view plain copy.container {

　　box-sizing:border-box;

　　padding:20px;

　　}

　　.previewimg{

　　float:left;

　　width:45%;

　　height:200px;

　　margin:2%;

　　}

　　.previewimg image{

　　width:100%;

　　height:100%;

　　}

　　3.js

　　使用网络的图

　　[html] view plain copyvar app = getApp()

　　Page({

　　data: {

　　imgalist:[ 'timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1496287851&di=0a26048f586b8521

　　93cb5026d60c4fad&imgtype=jpg&er=1&src=%3A%2F%2Fpic.58pic%2F58pic%2F12%2F74%2F05%2F99C58PICYck.jpg',

　　'timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1495693185413&di=0d0acdebf0f532edd0fcdb7

　　6265623c5&imgtype=0&src=%3A%2F%2Fimg1.3lian%2Fimg013%2Fv3%2F2%2Fd%2F61.jpg',

　　'timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1495693185413&di=55835ae37fdc95a317b03f28162c0

　　de1&imgtype=0&src=%3A%2F%2Fimg4.duitang%2Fuploads%2Fitem%2F201307%2F12%2F20130712224237_nSjht.jpeg',

　　'timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1495693185410&di=e28cc03d2ae84130eabc2

　　6bf0fc7495f&imgtype=0&src=%3A%2F%2Fpic36.photophoto%2F20150814%2F0005018308986502_b.jpg'

　　]},

　　/**

　　* 预览图片

　　*/

　　previewImage: function (e) {

　　var current=e.target.dataset.src;

　　wx.previewImage({

　　current: current, // 当前显示图片的链接

　　urls: this.data.imgalist // 需要预览的图片链接列表

　　})

　　}

　　})

　　参照上面的教程和相关小程序代码，想要实现小程序图片预览就开发成功了，有需要的小程序开发者们可以将这篇文章收藏一下，会有帮助的。更多资料请关注微信小程序商店。

　　微信小程序怎么上传图片到服务器?

　　小程序扫码图片加载如何设置?

　　怎么开发微信小程序转发图片的功能?