1122吧 关注:629贴子:3,294
  • 3回复贴,共1


1楼2021-06-29 15:18回复
    云存储
    7-2,上传图片到云存储
    实现
    1、新建页面/pages/yuncunchu/yuncunchu
    yuncunchu.wxml
    <!--pages/yuncunchu/yuncunchu.wxml-->
    <button bindtap="choose">上传图片</button>
    2、yuncunchu.js
    // pages/yuncunchu/yuncunchu.js
    Page({
    choose(){
    var that=this
    wx.chooseImage({ //选择图片
    count: 1, //上传数量
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success (res) {
    console.log(res)
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
    that.upload(tempFilePaths[0])
    }
    })
    },
    upload(tmpFile){
    wx.cloud.uploadFile({ //上传图片
    cloudPath: 'example.png',
    filePath: tmpFile, // 文件路径
    success: res => {
    // get resource ID
    console.log("上传成功",res)
    },
    fail: err => {
    // handle error
    console.log("上传失败",err)
    }
    })
    },
    })
    实验1:“商品详情页展示图片
    demo.wxml
    <!--pages/demo/demo.wxml-->
    <view wx:for="{{list}}" >
    <image src="{{item.img}}" class="img"></image>
    <view> 商品名:{{item.name}},价格:{{item.price}}</view>
    </view>
    demo.wxss
    /* pages/demo/demo.wxss */
    .img{
    width: 200rpx;
    height:200rpx;
    }
    demo.js(与之前内容一样)
    Page({
    onLoad(){
    wx.cloud.database().collection("goods")
    .get()
    .then(res =>{
    console.log("商品列表请求成功",res)
    this.setData({
    list:res.data
    })
    })
    .catch(res=>{
    console.log("商品列表请求失败",res)
    })
    },
    })
    实验2:商品详情页
    只需要修改一个地方
    demo1-1.js
    <view> 商品名:{{good.name}},价格:{{good.price}}</view>
    <image src="{{good.img}}"></image>
    上传视频
    yuncunchu.wxml
    <button bindtap="chooseView">上传视频</button>
    yuncunchu.js
    chooseView(){
    var that=this
    wx.chooseVideo({
    sourceType: ['album','camera'],
    maxDuration: 60,
    camera: 'back',
    success(res) {
    console.log(res.tempFilePath)
    that.uploadView(res.tempFilePath)
    }
    })
    },
    uploadView(tmpFile){
    wx.cloud.uploadFile({
    cloudPath: 'ab.mp4',
    filePath: tmpFile, // 文件路径
    success: res => {
    // get resource ID
    console.log("上传成功",res)
    },
    fail: err => {
    // handle error
    console.log("上传失败",err)
    }
    })
    },
    代码去冗余
    Page({
    choose(){
    var that=this
    wx.chooseImage({ //选择图片
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
    console.log(tempFilePaths)
    that.upload(tempFilePaths[0],'aa.png') //修改
    }
    })
    },
    upload(tmpFile,updFile){ //修改
    wx.cloud.uploadFile({
    cloudPath: updFile, //修改
    filePath: tmpFile, // 文件路径
    success: res => {
    // get resource ID
    console.log("上传成功",res)
    },
    fail: err => {
    // handle error
    console.log("上传失败",err)
    }
    })
    },
    chooseView(){
    var that=this
    wx.chooseVideo({
    sourceType: ['album','camera'],
    maxDuration: 60,
    camera: 'back',
    success(res) {
    console.log(res.tempFilePath)
    that.upload(res.tempFilePath,'aa.mp4') //修改
    }
    })
    },
    })
    上传文件
    <button bindtap="chooseFile">选择文件</button>
    chooseFile(){
    var that=this
    wx.chooseMessageFile({
    count: 1,
    type: 'all',
    success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFiles
    console.log(tempFilePaths[0])
    that.upload(tempFilePaths[0].path,tempFilePaths[0].name)
    }
    })
    },
    下载文件
    .wxml
    <view>请输入下载链接</view>
    <input class="lianjie" bindinput="getContent"></input>
    <button bindtap="downLoad">下载</button>
    .wxss
    .lianjie{
    border: 1rpx solid black;
    }
    .js
    getContent(e){
    console.log(e.detail.value)
    this.setData({
    fileID:e.detail.value
    })
    },
    downLoad(){
    var fileID
    fileID=this.data.fileID
    console.log("下载链接为:",fileID)
    wx.cloud.downloadFile({
    fileID: fileID,
    success: res => {
    // get temp file path
    console.log("下载成功",res)
    },
    fail: err => {
    // handle error
    console.log("下载失败",res)
    }
    })
    },
    下载并打开word excel ppt
    downLoad(){
    var fileID
    fileID=this.data.fileID
    console.log("下载链接为:",fileID)
    wx.cloud.downloadFile({
    fileID: fileID,
    success: res => {
    // get temp file path
    console.log("下载成功",res)
    const filePath = res.tempFilePath //新增加
    wx.openDocument({ //新增加
    filePath: filePath, //新增加
    success: function (res) { //新增加
    console.log('打开文档成功') //新增加
    }
    })
    },
    实例
    一、使用云函数、云存储识别身份证、银行卡信息
    识别银行卡
    card2/index.js
    const cloud = require('wx-server-sdk')
    cloud.init({
    env: cloud.DYNAMIC_CURRENT_ENV,
    })
    exports.main = async (event, context) => {
    try {
    const result = await cloud.openapi.ocr.bankcard({ //识别银行卡
    "type": 'photo',
    "imgUrl": event.imgCard2
    })
    return result
    } catch (err) {
    return err
    }
    }
    创建页面
    wxml
    <!--pages/shibie/shibie.wxml-->
    <button bindtap="shibie2">识别银行卡</button>
    <text>银行卡号是:{{number}}</text>
    js
    shibie2(){ //识别银行卡
    var that=this
    wx.cloud.callFunction({
    name:"card2",
    data:{
    imgCard2:"https://7975-yunjisaun-5gscklsyde3525d6-
    1305769838.tcb.qcloud.la/%E9%93%B6%E8%A1%8C%E5%8D%A1.jpg?
    sign=334b0a938eddcc7a6f935cd5c1e0463a&t=1623922340"
    },
    success(res){
    console.log("识别成功",res)
    that.setData({
    number:res.result.number
    })
    },
    fail(res){
    console.log("识别失败",res)
    },
    })
    },
    识别身份证
    icard1/index.js
    const cloud = require('wx-server-sdk')
    cloud.init({
    })
    exports.main = async (event, context) => {
    try {
    const result = await cloud.openapi.ocr.idcard({
    "type": 'photo',
    "imgUrl": event.imgCard
    })
    console.log(result)
    return result
    } catch (err) {
    return err
    }
    }
    wxml
    <button bindtap="shibie">识别身份证</button>
    <view>姓名是:{{name}}</view>
    <view>身份证号是:{{id}}</view>
    <view>性别是:{{gender}}</view>
    .js
    shibie(){ //识别身份证
    var that=this
    wx.cloud.callFunction({
    name:"card1",
    data:{
    imgCard:"https://7975-yunjisaun-5gscklsyde3525d6-
    1305769838.tcb.qcloud.la/2.jpg?
    sign=10f4a855f58ce6dc69b1eebc71e5b060&t=1623922187"
    },
    success(res){
    console.log("识别成功",res)
    that.setData({
    name:res.result.name,
    id:res.result.id,
    gender:res.result.gender
    })
    },
    fail(res){
    console.log("识别失败",res)
    },
    })
    },
    二、上传图片后识别
    1、选择图片
    js
    shibie(){
    var that=this
    wx.chooseImage({ //选择图片
    count: 1, //上传数量
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success (res) {
    console.log(res)
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
    that.upload(tempFilePaths[0])
    }
    })
    },
    2、上传图片
    upload(tmpFile){
    var that=this
    wx.cloud.uploadFile({ //上传图片
    cloudPath: 'example.png',
    filePath: tmpFile, // 文件路径
    success: res => {
    console.log("上传成功",res.fileID)
    that.getUrl(res.fileID)
    },
    fail: err => {
    console.log("上传失败",err)
    }
    })
    },
    3、转换图片链接路径
    getUrl(fileid){
    var that=this
    wx.cloud.getTempFileURL({
    fileList: [{
    fileID: fileid,
    }]
    }).then(res => {
    console.log("获取URL成功",res.fileList[0].tempFileURL)
    var httpUrl=res.fileList[0].tempFileURL
    that.getID(httpUrl)
    }).catch(error => {
    console.log("获取url失败")
    })
    },
    4、调用云函数识别
    getID(tmp){
    var that=this
    wx.cloud.callFunction({
    name:"card1",
    data:{
    imgCard:tmp
    },
    success(res){
    console.log("识别成功",res.result) //name id gender
    that.setData({
    name:res.result.name,
    id:res.result.id,
    gender:res.result.gender
    })
    },
    fail(res){
    console.log("识别失败",res)
    },
    })
    },


    5楼2021-06-29 16:34
    回复
      云函数
      1、初始化环境
      2、使用云函数获取openidopenid--每个用户调用小程序,都会生成一个openid。(数据库中有存储)新建页面为/pages/yunhanshu/yunhanshu
      1、传统方式获取openidyunhanshu.wxmlyunhanshu.js
      2、简单写法yunhanshu.js
      3、连接到数据库
      4、测试返回数据数量
      5、云函数修改数据本地小程序直接调用数据库修改会有问题只能修改自己创建的数据,别人创建的数据,就没有办法修改了。如何解决呢? 用云函数来修改就可以解决这个问题啦。
      1,先创建云函数update0129
      2,调用云函数就行修改
      6、云函数删除数据
      1,创建一个删除商品的云函数remove0129
      2,调用这个云函数进行删除操作
      7、提交数据到云函数
      1,创建云函数,并部署
      2,调用云函数
      答案
      1、使用云函数更新数据
      1)新建云函数update,完成后上传并部署到云端
      2)新增加页面用于更新 pages/update/update
      update.wxml
      <input placeholder="请输入ID" bindinput="updDataInput"></input> //输入id
      <input placeholder="请输入num" bindinput="updNum"></input> //输入修改的内容
      <button bindtap="updData" type="primary">更新数据</button> //更新按钮
      3)update.js
      var id
      var num
      Page({
      updDataInput(e){
      id=e.detail.value
      },
      updNum(e){
      num=e.detail.value
      },
      updData(){
      wx.cloud.callFunction({
      name:'update', //云函数名称
      data:{
      id:id,
      num:num
      }
      })
      .then(res=>{
      console.log('请求云函数成功',res)
      })
      .catch(err=>{
      console.log('请求云函数失败',err)
      })
      },
      })
      2、使用云函数删除数据
      1)新建云函数remove01,index.js里的内容为:
      return cloud.database().collection("num")
      .doc(event.id)
      ..remove()
      2)新增加页面用于删除 pages/remove/removeremove.wxml
      <input placeholder="请输入ID" bindinput="updDataInput"></input>
      <button bindtap="remData" type="primary">删除数据</button>
      3)remove.js
      // pages/remove/remove.js
      var id
      Page({
      updDataInput(e){
      id=e.detail.value
      },
      remData(){
      wx.cloud.callFunction({
      name:'remove01',
      data:{
      id:id
      }
      })
      .then(res=>{
      console.log('请求云函数成功',res)
      })
      .catch(err=>{
      console.log('请求云函数失败',err)
      })
      }
      })


      6楼2021-06-30 15:34
      回复
        ycc js
        Page({
        onLoad(){
        wx.cloud.database().collection("kaoshi")
        .get()
        .then(res =>{
        console.log("商品列表请求成功",res)
        this.setData({
        list:res.data
        })
        })
        .catch(res=>{
        console.log("商品列表请求失败",res)
        })
        },
        goDetail(e){
        console.log('点击了跳转商品详情',e.currentTarget.dataset.id)
        wx.navigateTo({
        url: '/pages/ycc1/ycc1?id=' + e.currentTarget.dataset.id,
        })
        },
        addGoods(){
        wx.navigateTo({
        url: '/pages/add/add',
        })
        },
        })
        wxml
        <view wx:for="{{list}}">
        <image src="{{item.img}}" class="img"></image>
        <view> 商品名:{{item.name}},价格:{{item.price}}</view>
        </view>
        <!-- <view bindtap="goDetail" data-id="{{item._id}}"> 商品名:{{item.name}},价格:
        {{item.price}}</view>
        <view bindtap="goDetail" data-id="{{item._id}}"> 商品名:{{item.name}},价格:
        {{item.price}}</view> -->
        <view bindtap="addGoods" class="addprice">添加商品</view>
        wxss
        .img{
        width: 200rpx;
        height:200rpx;
        }
        ycc1
        js
        Page({
        onLoad(options){
        var id=options.id
        wx.cloud.database().collection("kaoshi")
        .doc(id)
        .get()
        .then(res =>{
        console.log("商品列表请求成功",res)
        this.setData({
        list:res.data
        })
        })
        .catch(res=>{
        console.log("商品列表请求失败",res)
        })
        }
        })
        wxml
        <view> 商品名:{{kaoshi.name}},价格:{{kaoshi.price}}</view>
        <image src="{{good.img}}"></image>
        add
        js
        const DB = wx.cloud.database().collection("kaoshi")
        var name
        var price
        var id
        Page({
        addName(e){
        name=e.detail.value
        },
        addPrice(e){
        price=e.detail.value
        },
        addDate(){
        if(name==null){
        wx.showToast({
        icon:'none',
        title: '商品名空了',
        })
        }else if(price==null){
        wx.showToast({
        icon:'none',
        title: '价格空了',
        })
        }else{
        DB.add({
        data:{
        name:name,
        price:price
        },
        success(res){
        console.log("添加成功",res)
        },
        fail(res){
        console.log("添加失败",res)
        }
        })
        }
        },
        })
        wxml
        <input placeholder="请输入商品名" bindinput="addName"></input>
        <input placeholder="请输入价格" bindinput="addPrice"></input>
        <button bindtap="addDate" type="primary">添加商品</button>
        shibie
        index.js
        const cloud = require('wx-server-sdk')
        cloud.init({
        })
        exports.main = async (event, context) => {
        try {
        const result = await cloud.openapi.ocr.idcard({
        "type": 'photo',
        "imgUrl": event.imgCard
        })
        console.log(result)
        return result
        } catch (err) {
        return err
        }
        }
        js
        // pages/sfz/sfz.js
        Page({
        shibie(){
        var that=this
        wx.cloud.callFunction({
        name:"card2",
        data:{
        imgCard:"https://7969-yinhongxin-6gvnvcrf689f3e1a-1305894768.tcb.qcloud.la/ycc/%E8%BA%AB%E4%BB%BD%E8%AF%81.jpg?sign=9b534a53ed5c2b7237821c66b3fed146&t=1624348551"
        },
        success(res){
        console.log("识别成功",res)
        that.setData({
        name:res.result.name,
        id:res.result.id,
        gender:res.result.gender
        })
        },
        fail(res){
        console.log("识别失败",res)
        },
        })
        },
        })
        wxml
        <button bindtap="shibie">识别身份证</button>
        <view>姓名是:{{name}}</view>
        <view>身份证号是:{{id}}</view>
        <view>性别是:{{gender}}</view>
        wenjian
        js
        // pages/wenjian/wenjian.js
        Page({
        chooseFile(){
        var that=this
        wx.chooseMessageFile({
        count: 1,
        type: 'all',
        success (res) {
        const tempFilePaths = res.tempFiles
        console.log(tempFilePaths[0])
        that.upload(tempFilePaths[0].path,tempFilePaths[0].name)
        }
        })
        },
        getContent(e){
        console.log(e.detail.value)
        this.setData({
        fileID:e.detail.value
        })
        },
        downLoad(){
        var fileID
        fileID=this.data.fileID
        console.log("下载链接为:",fileID)
        wx.cloud.downloadFile({
        fileID: fileID,
        success: res => {
        console.log("下载成功",res)
        },
        fail: err => {
        console.log("下载失败",res)
        }
        })
        },
        })
        wxml
        <button bindtap="chooseFile">选择文件</button>
        <view>请输入下载链接</view>
        <input class="lianjie" bindinput="getContent"></input>
        <button bindtap="downLoad">下载</button>
        wxss
        lianjie{
        border: 1rpx solid black;
        }
        huanjing
        App({
        onLaunch(){
        wx.cloud.init({
        env:"yinhongxin-6gvnvcrf689f3e1a"
        })
        }
        })
        "cloudfunctionRoot": "cloud/",


        7楼2021-06-30 21:25
        回复