<xmp id="cogkk"><nav id="cogkk"></nav>
<dd id="cogkk"></dd>
  • <menu id="cogkk"><menu id="cogkk"></menu></menu>
    <menu id="cogkk"><code id="cogkk"></code></menu>

    卓象程序員 | 哈爾濱IT培訓 | 品質教育,口碑傳承 | 為做出口口相傳,好口碑的教育品牌而奮斗!

    卓象程序員讓每一位學員高薪就業 聯系我們13101507057

    加微信,了解詳情
    您所在的位置:首頁 > 文章 >小程序連載

    「小程序開發連載二十」調用手機硬件
    時間: 2018-11-08 17:05:43     來源: 卓象IT實訓基地【原創】

    上一篇文章講解“小程序接口”,本篇文章講解“調用手機硬件”。


    小程序可以調用手機的硬件,如相機、相冊、視頻、錄音等等。

    主要了解一下調用手機的相機和相冊功能。

    「小程序開發連載二十」調用手機硬件


    wx.chooseImage(OBJECT)

    從本地相冊選擇圖片或使用相機拍照。

    OBJECT參數說明:

    「小程序開發連載二十」調用手機硬件



    1. wx.chooseImage(OBJECT)的使用

    ①新建頁面

    「小程序開發連載二十」調用手機硬件


    ②在chooseImg.wxml頁面添加按鈕,并綁定觸屏事件,調用手機硬件

    「小程序開發連載二十」調用手機硬件


    編譯預覽:

    「小程序開發連載二十」調用手機硬件


    ③在交互層(chooseImg.js)中添加choose事件,并調用小程序的API(wx.chooseImage)

    「小程序開發連載二十」調用手機硬件


    編譯預覽,選擇一張圖片:

    「小程序開發連載二十」調用手機硬件



    2. wx.chooseImage(OBJECT)的參數

    ①count——最多可以選擇的圖片數量,默認9

    可以同時選中多張圖片進行上傳。

    「小程序開發連載二十」調用手機硬件


    ②success——接口調用成功,必填

    接口調用成功,返回圖片的路徑信息等。

    success返回參數說明:

    「小程序開發連載二十」調用手機硬件


    File對象結構如下:

    「小程序開發連載二十」調用手機硬件


    例如:

    「小程序開發連載二十」調用手機硬件


    如果要使用圖片的路徑,可以直接使用tempFilePaths參數下的路徑,和tempFiles下的path是相同的。

    ③其他

    sizeType是上傳原圖還是壓縮圖,默認二者都有,一般不動。

    sourceType是從相冊選擇,還是使用相機,默認二者都有,一般不動。

    fail接口調用失敗時返回的函數。

    complete接口調用結束后操作的函數。


    3. 選擇的圖片在界面層展示

    選擇后的圖片要在手機端展示出來,給用戶看。

    ①在界面層(chooseImg.wxml)添加圖片標簽

    「小程序開發連載二十」調用手機硬件


    ②設置圖片路徑數據

    在界面層要用數據,就需要在交互層的頁面初始數據data中定義數據。

    「小程序開發連載二十」調用手機硬件


    頁面路徑保存在choose事件下獲取并設置。

    「小程序開發連載二十」調用手機硬件


    ③在界面層展示圖片,多張圖片需要循環展示

    「小程序開發連載二十」調用手機硬件


    編譯預覽:

    「小程序開發連載二十」調用手機硬件



    4. 預覽圖片

    預覽圖片,使用的API是wx.previewImage(OBJECT)。

    OBJECT參數說明:

    「小程序開發連載二十」調用手機硬件


    預覽圖片時是點擊圖片,圖片放大預覽。

    1)預覽圖片API的使用

    ①為圖片添加點擊事件

    「小程序開發連載二十」調用手機硬件


    ②在交互層(chooseImg.js)中定義preview事件,并調用圖片預覽API

    「小程序開發連載二十」調用手機硬件


    ③編譯預覽

    「小程序開發連載二十」調用手機硬件


    點擊圖片預覽:

    「小程序開發連載二十」調用手機硬件


    2)current參數

    但是現在有個問題,當上傳多張圖片時,無論點擊哪張圖片,都是展示第一張圖片,然后圖片可以左右拖動瀏覽。

    要解決此問題,只要設置current屬性即可,當點擊某張圖片時,獲取圖片的url,將current參數的值設置為當前圖片的url。要獲取當前圖片的url,需要用到標簽的一個屬性“data-”。

    ①為圖片標簽添加data-屬性,設置圖片的路徑

    「小程序開發連載二十」調用手機硬件


    ②在交互層輸出圖片點擊的事件對象

    「小程序開發連載二十」調用手機硬件


    編譯預覽:

    「小程序開發連載二十」調用手機硬件


    在事件對象中保存著當前被點擊圖片的路徑。

    ③將被點擊圖片路徑賦值給current參數

    「小程序開發連載二十」調用手機硬件


    編譯預覽:

    「小程序開發連載二十」調用手機硬件


    「小程序開發連載二十」調用手機硬件


    關注卓象程序員,定期發布技術文章

    下一篇文章講解“身份證識別功能”

    「小程序開發連載二十」調用手機硬件
    热99re久久精品|天天综合网久久综合免费人成|91久久久久久久精品青草| 亚洲AV无码无一区二区Ⅰ久久|
    <xmp id="cogkk"><nav id="cogkk"></nav>
    <dd id="cogkk"></dd>
  • <menu id="cogkk"><menu id="cogkk"></menu></menu>
    <menu id="cogkk"><code id="cogkk"></code></menu>