記一次微信小程式的開發

来源:https://www.cnblogs.com/lovejunjuan/archive/2019/07/18/11204961.html
-Advertisement-
Play Games

使用工具: 1.微信Web開發者工具 2.Visual Studio 2019 前端採用color UI,後端採用c# .net 過程中的幾個重點點記錄 1.color UI使用 下載colorUI以後 將icon.wxss、colorui.wxss拷貝至項目根目錄 在app.wxss中導入文件 @ ...


使用工具:

1.微信Web開發者工具

2.Visual Studio 2019

前端採用color UI,後端採用c# .net

 

過程中的幾個重點點記錄

1.color UI使用

下載colorUI以後

將icon.wxss、colorui.wxss拷貝至項目根目錄

在app.wxss中導入文件

@import "icon.wxss"; @import "colorui.wxss";   2.圖片上傳功能

 

wxml前端代碼
<view class="cu-form-group">
  <view class="picture_list">
  <view wx:for="{{upload_picture_list}}" class="picture_item" wx:key="{{index}}">
    <image wx:if="{{item.upload_percent < 100}}" src="{{item.path}}" mode="aspectFill"></image>
    <image wx:if="{{item.upload_percent == 100}}" src="{{item.path_server}}" mode="aspectFill"></image>
    <view class="upload_progress" wx:if="{{item.upload_percent < 100}}" data-index="{{index}}" bindtap="previewImg">{{item.upload_percent}}%</view>
    <text class='del' bindtap='deleteImg' data-src='{{image}}' style='display:{{isDel}}' data-index="{{index}}">×</text>
  </view>

  <view class='picture_item'>
    <view class="add-image" bindtap='uploadpic'>
      <text>+</text>
    </view>
  </view>
</view>
</view>
<view class="cu-form-group">
<button bindtap='uploadimage' class='yes-upload'>上傳圖片</button>
</view>

 js代碼

  //選擇圖片方法
  uploadpic: function (e) {
    let that = this //獲取上下文
    let upload_picture_list = that.data.upload_picture_list
    //選擇圖片
    wx.chooseImage({
      count: 8, // 預設9,這裡顯示一次選擇相冊的圖片數量 
      sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖,預設二者都有  
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,預設二者都有
      success: function (res) { // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標簽的src屬性顯示圖片 
        let tempFiles = res.tempFiles
        //把選擇的圖片 添加到集合里
        //console.log(tempFiles);
        for (let i in tempFiles) {
          tempFiles[i]['upload_percent'] = 0
          tempFiles[i]['path_server'] = ''
          upload_picture_list.push(tempFiles[i])
        }
        //顯示
        that.setData({
          upload_picture_list: upload_picture_list,
        });
      }
    })
  },
  //點擊上傳圖片
  uploadimage() {
    let page = this
    let upload_picture_list = page.data.upload_picture_list
    //迴圈把圖片上傳到伺服器 並顯示進度       
    for (let j in upload_picture_list) {
      if (upload_picture_list[j]['upload_percent'] == 0) {
        //console.log("進入上傳if");
        //上傳圖片後端地址
        //upload_file_server('https://www.x..fds.af..a.fd.sa', page, upload_picture_list, j)
        //console.log(this.data.problemAttach);
        wx.uploadFile({
          url: this.data.domain+'api/FirstAPI/uploadPicture?problemAttach=' + this.data.problemAttach, //上傳的介面地址 
          filePath: upload_picture_list[j].path,
          name: 'file',
          formData: {
            problemAttach: this.data.problemAttach,
          },
          success: function (res) {
            console.log(res);
            upload_picture_list[j]['upload_percent'] = 100
            upload_picture_list[j]['path_server'] = '介面地址' + JSON.parse(res.data).data;
            page.setData({
                upload_picture_list: upload_picture_list,
                problemAttach: JSON.parse(res.data).msg 
            });
          }
        })
      }
    }
    let imgs = wx.setStorageSync('imgs', upload_picture_list);
  },
  // 點擊刪除圖片
  deleteImg(e) {
    let upload_picture_list = this.data.upload_picture_list;
    let index = e.currentTarget.dataset.index;
    if (upload_picture_list[index].upload_percent == 100) {
      //去伺服器把對應的記錄del
      this.data.delIndex = index;
      this.ajaxfunc(1);
    }
    upload_picture_list.splice(index, 1);
    this.setData({
      upload_picture_list: upload_picture_list
    });
  },
  // 預覽圖片
  previewImg(e) {
    //獲取當前圖片的下標
    let index = e.currentTarget.dataset.index;
    //所有圖片
    let imgs = this.data.imgs;
    wx.previewImage({
      //當前顯示圖片
      current: imgs[index],
      //所有圖片
      urls: imgs
    })
  },

c#後端api介面

public IHttpActionResult uploadPicture(string problemAttach)
        {
            string mesg = problemAttach;
            if (problemAttach==null||problemAttach==""||problemAttach=="undefined" || problemAttach == "null")
            {
                problemAttach = CommonHelper.GetGuid;
                mesg = problemAttach;
            }
            Repository<MK_Base_AnnexesFile> re = new Repository<MK_Base_AnnexesFile>();
            
            HttpFileCollection files = HttpContext.Current.Request.Files;
            List<string> serversrc = new List<string>();
            foreach (string key in files.AllKeys)
            {
                MK_Base_AnnexesFile fileAnnexesEntity = new MK_Base_AnnexesFile();
                HttpPostedFile file = files[key];//file.ContentLength文件長度
                string src = HttpContext.Current.Server.MapPath("~/imgcoll/") + file.FileName;
                src=src.Replace("\\","/");
                if (string.IsNullOrEmpty(file.FileName) == false)
                {
                    file.SaveAs(src);
                    serversrc.Add("/imgcoll/"+file.FileName);
                }
                //str = str.Substring(0, str.LastIndexOf("/"));
                fileAnnexesEntity.F_Id = file.FileName.Substring(0, file.FileName.LastIndexOf(".")); 
                fileAnnexesEntity.F_FileName = file.FileName;
                fileAnnexesEntity.F_FilePath = src;
                fileAnnexesEntity.F_FileSize = "未知";
                fileAnnexesEntity.F_FileExtensions = file.FileName.Substring(file.FileName.LastIndexOf("."));
                fileAnnexesEntity.F_FileType = file.FileName.Substring(file.FileName.LastIndexOf(".")+1);
                fileAnnexesEntity.F_CreateUserId = "微信端上傳";
                fileAnnexesEntity.F_CreateUserName = "微信端上傳";
                fileAnnexesEntity.F_FolderId = problemAttach;
                re.Insert(fileAnnexesEntity);


            }

            return JsonData(true, serversrc[0], mesg);
        }

 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 初識事務隔離 事務隔離級別的出現都是針對資料庫的具體問題的, SQL 92標準對事務併發處理會存在的異常情況進行了分級, 分別為臟讀(Dirty Read)、不可重覆讀(Unrepeatable Read)和幻讀(Phantom Read). 三種異常 舉個例子, 有個heros_temp表, 中有 ...
  • 一、基於詞項與全文的搜索 1、詞項 Term(詞項)是表達語意的最小單位,搜索和利用統計語言模型進行自然語言處理都需要處理Term。 Term的使用說明: 1)Term Level Query:Term Query、Range Query、Exists Query、Prefix Query、Wild ...
  • 轉自:https://blog.csdn.net/weixin_33979203/article/details/87621768 改進,再找不到key,返回''值,之前的是在找不到的情況下,查找到第一的值。 ...
  • 在使用eclipse連接mysql資料庫時報異常: java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES) at com.mysql.jdbc.SQLError.createSQLE ...
  • Dart作為高級語言,支持面向對象的很多特性,並且支持基於mixin的繼承方式,基於mixin的繼承方式是指:一個類可以繼承自多個父類,相當於其他語言里的多繼承。所有的類都有同一個基類Object,這和特性類似於Java語言,Java所有的類也都是繼承自Object,也就是說一切皆對象。 ...
  • 剛招來個Android,幹了半個月辭職了,他走之後,成堆的bug被測了出來,都是這個新人代碼都沒看懂就開始改的一塌糊塗,還給提交了。實在是讓人頭疼,清理了一個月多月才把他半個月寫的bug清理個差不多。實在是得不償失。有了這個前車之鑒,不得不重視新人的崗前培訓,畢竟面試找個來了就能上手的實在是太難了。 ...
  • 1. 出現錯誤提示:Intel HAXM is required to run this AVD,VT-x is disabled in BIOS的解決辦法。 點擊SDK圖標,安裝Intel x86 Emulator Accelerator (HAXM installer)。 在sdk路徑下,找到e ...
  • 拿到題目, 首先要先瞭解鏈表數據結構, 如下圖: 常規思路: 利用數組, 遍歷整個單鏈表, 將每個節點裝入數組中, 最終拿到數組根據索引(數組長度-1-n)就得到了倒數第n個元素. 簡單思路: 假設總長度為n, 倒數第k個對應正數第n-k-1, 那麼第一個指針移動k-1次, 第二個指針保持在head ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...