微信小程式wx.previewImage預覽圖片
一.小知識
二.例子
1.wxml
<view class="container">
<view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg">
<image src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
</view>
</view>
2.wxss
.container {
box-sizing:border-box;
padding:20px;
}
.previewimg{
float:left;
width:45%;
height:200px;
margin:2%;
}
.previewimg image{
width:100%;
height:100%;
}
3.js
使用網路的圖
var app = getApp()
Page({
data: {
imgalist:[ 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1496287851&di=0a26048f586b8521
93cb5026d60c4fad&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F12%2F74%2F05%2F99C58PICYck.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495693185413&di=0d0acdebf0f532edd0fcdb7
6265623c5&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2Fimg013%2Fv3%2F2%2Fd%2F61.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495693185413&di=55835ae37fdc95a317b03f28162c0
de1&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201307%2F12%2F20130712224237_nSjht.jpeg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495693185410&di=e28cc03d2ae84130eabc2
6bf0fc7495f&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150814%2F0005018308986502_b.jpg'
]},
/**
* 預覽圖片
*/
previewImage: function (e) {
var current=e.target.dataset.src;
wx.previewImage({
current: current, // 當前顯示圖片的http連結
urls: this.data.imgalist // 需要預覽的圖片http連結列表
})
}
})
使用本地的圖片:
var app = getApp()
Page({
data: {
imgalist:[ '../uploads/a01.jpg',
'../uploads/a02.jpg',
'../uploads/a03.jpg',
'../uploads/foods.jpg'
]},
/**
* 預覽圖片
*/
previewImage: function (e) {
var current=e.target.dataset.src;
wx.previewImage({
current: current, // 當前顯示圖片的http連結
urls: this.data.imgalist // 需要預覽的圖片http連結列表
})
}
})
所以這個介面, 按照官方示例, 可能只支援 http
或者 https
協議的網路圖片地址.
注意:
網上還有說本地圖片確實是不可以的,後面通過選取手機相簿內的照片,可以預覽,前提是在真機上演示。
由於我沒有獲取APPID,所以無法再真機上演示,所以先附上程式碼,後期再做詳解。
相關推薦
微信小程式wx.previewImage預覽圖片
一.小知識 二.例子 1.wxml <view class="container"> <view wx:for="{{imgalist}}" wx:for-item="imag
微信小程式真機預覽跟本地不同的問題
微信小程式中出現最多的一個問題,就是真機跟本地不同:我簡單列舉一些我發現的原因,給大家參考,大家也可以把自己發現的東西回覆給我,給我參考:本地看不到資料,就先讓本地能看到資料,再看本帖。。。。特別提示:當問題較為複雜時,請製作一個專門的最簡demo,以便集中觀察,確定問題。
微信小程式wx.request請求沒反應,真機預覽測試請求無效問題解決總結。
我釋出之後發現,wx.request無法使用,用小程式開發工具測試的都沒有問題,而且校驗了合法域名、web-view(業務域名)、TLS 版本以及 HTTPS 證書,都沒有任何問題,釋出之後,發現了問題,在網上看了很多說法,再次我用自己的理解做個總結。 測試了
坑:微信小程式wx.request和wx.uploadFile中傳引數的區別
微信小程式中通過元件<form>提交表單的時候,在js中通過e.detail.value得到所提交表單的json格式資料。一般提交表單我們都是通過wx.request請求,提交表單資料,通過引數data傳資料, wx.request({ url: 'test.php', //僅為示例,
微信小程式wx.request踩坑記錄
一:header['content-type'] 為 application/json 的資料 前端 wx.request({ url: apiUrl, //替換成自己的伺服器地址 data: {
微信小程式 wx.request wepy 簡單封裝
本文出自: http://blog.csdn.net/wyk304443164 很簡單 import sha1 from './sha1' // sign // 簽名 function sign (signObj = {}) { ... // 自行加密
微信小程式wx.redirectTo、wx.navigateTo跳轉失敗
在開發小程式時,用到下面三種頁面跳轉方法,路徑寫對後跳轉沒有反應,也沒報錯。 wx.navigateTo(OBJECT) 保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。 wx.redirectTo(OBJECT) 關閉當前頁面,跳轉
微信小程式 wx.reLaunch 執行前幾個頁面的 onUnload 鉤子
微信小程式 wx.reLaunch 執行前幾個頁面的 onUnload 鉤子 解決方案 有種場景:頁面 A => B => C => D, 當在 C 頁面呼叫 wx.reLaunch({url:’/pages/D’}) 時,頁面 A 、B、C 的 onUnloa
微信小程式wx:for和wx:for-item的區別
wx:for="{{list}}"用來迴圈陣列,而list即為陣列名wx:for-item="items" 即用來定義一個迴圈過程中每個元素的變數的 如果是一維陣列,按照如下方式迴圈出來: 1 2 3 <view wx
微信小程式wx.login登陸+php
wxml: <button bindtap='login'>登入</button> js: //登入獲取code login: function () {
微信小程式wx.uploadFile的兩個坑
setImage:function(e){ var _this = this //坑1 wx.chooseImage({ count: 1, sizeType: [‘original’, ‘compressed’], sourceType: [‘album’, ‘camera’], success: fun
微信小程式wx.request()封裝
微信小程式開發過程中,請求用的次數是比較多的,那麼能自己每次的重複程式碼太多,所以還是自己封裝一個請求吧,使程式碼越來越精簡。 現在請求分為兩種一種是GET一種是POST,在微信小程式的請求中POST請求的header中的'content-type'為'applicati
微信小程式wx.getUserInfo方法獲取的使用者資訊為英文字母
我們在開發微信小程式的時候會發現用wx.getUserInfo方法獲取到的使用者國家、省份、城市等資訊都是英文字母,要想獲取中文資訊,您只需在wx.getUserInfo中加上 lang:"zh_CN"這條語句就可以,如下圖所示:
微信小程式wx.uploadFile(上傳檔案)PHP伺服器獲取formData的資料
例如下面的程式碼是微信小程式上傳圖片的程式碼: wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({
使用Promise對微信小程式wx.request請求方法進行封裝,配有詳細過程
採用Promise的方式來封裝而不採用回撥函式(callBack)的方式封裝的主要好處是防止回撥地獄等。。。 主要分為四個部分: 1、config.js檔案,主要存放小程式的配置,例如請求的伺服器地址 const config = { api_base_url:
MVC Api微信小程式wx.uploadFile上傳檔案,前後端程式碼例項
// 小程式端js Page({ /** * 頁面的初始資料 */ data: { userHeaderImage: "../../../images/1.jpg" }
微信小程式:wx.downloadFile 不成功,沒報錯 downloadFile:fail Error: socket hang up 錯誤
小程式剛出來,因為預研需要,很不幸的做了一回小白鼠,於是掉進了神坑。 下載檔案,首先是沒報錯了,然後不成功,這個時候,請把 fail開啟,把fail的報錯資訊輸出來 wx.downloadFile({ url: 'https://xxxx.xxx.
微信小程式 wx.uploadFile 的編碼坑
編寫微信小程式時,用到 wx.uploadFile,用來上傳圖片+文字資訊.然而在編寫過程中,由於官方的 demo 和文件描述很少,在幾個坑上耗費了不少時間. 這裡分享一個和編碼有關的坑,主要是由於真機預覽時 formData 中的非字母、數字的 ASCII
微信小程式wx.request後臺資料互動
From:http://blog.csdn.net/a61595579/article/details/53404451 記錄微信小程式wx.request這個api在跟後臺互動時遇上的問題。 1、根據資料,完成第一步,請求傳送,程式碼如下: [javascript] view plain
微信小程式wx.getImageInfo()獲取圖片資訊
一.知識點 二.列子 (1).載入時 <view class="zn-uploadimg"> <image src="{{tempFilePaths}}" mode="as