微信小程序项目开发--我的名片

由于工作需要，我和同事们经常需要各种自已营销扫码的二维码，二维码一多就不好查找了，微信小程序用的人多，方便查找，能转发、朋友圈分享小程序（官网已上线）,所以用微信小程序开发我的名片，集中保管二维码，方便查找，我的同事再也不怕找不到他的营销二维码了。这是我第一次开发微信小程序，边做边学，以此记下心得。

上线前是这样的：

 上线后是这样的：  

 有些失望吧，是因为我是个人开发者，开发微信小程序上线需要腾讯审核，带营销、测试等字样，个人开发者开发的程序几乎是限制了。。（怎样合理规僻审核有侍研究），不过没关系，功能已全部实现了。能转发给朋友或分享朋友圈自带参数，保证显示是分享用户的数据。

 由于要远程保管二维码图片：这里采用的免费云开发，自带云数据库、云存储：代码很多，好多是微信小程序自带的，重点在转发、分享朋友圈带多参数格式，查看图片时需转化成http临时文件地址，再带?a=new  Date().getTime() 这种无用的动态变量。以保证看图片时是最新的图片，不然微信小程序会缓存图片，总是显示老图

1：启动小程序自动连接云环境,：app.js文件里：

App({  
  
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
      wx.cloud.init({            //连接云环境
         env:"first1-gbopy"    //环境ID：first1-gbopy
      })   
    
  },
globalData:{  //全局变量   
  name:"",
  photo:"",
  Title:"",
  Picture1:"",
  Picture2:"",
  Picture4:"",
  Picture4:"",
  openid:""

},


  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

手动创建云函数：getOpenid  。 index.js里的代码要返回openid ，到时以openid的值设置成数据库字段"_id"的值，这样能保证数据的唯一性。

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
 
  //获取姓名 openid 

  return {  
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

2：主页面：我的名片---index.js代码：

const DB = wx.cloud.database().collection("list1") //连接数据库
let openid = ""
let name = ""
let photo = ""
let title = ""
var that1 = this
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //name:getApp().globalData.name



  },

  getOpenid() { //获取云函数
    let that = this;
    wx.cloud.callFunction({
      name: 'getOpenid',
      complete: res => {
        console.log('云函数获取到的openid:', res)
        openid = res.result.openid
        that.setData({
          openid: openid
        })

        //11获取          
        DB.doc(openid).get({
          success(res) {
            console.log("查到", res, "最抂", res.data._openid), //查全局变量         
              // app.globalData.fristname = res.data.姓名;
              getApp().globalData.name = res.data.姓名
            console.log(getApp().globalData.name), //查全局变量         
              getApp().globalData.photo = res.data.手机号
            getApp().globalData.openid = res.data._openid
            console.log("cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + openid + "Title.jpg"), //查全局变量                        


              wx.cloud.getTempFileURL({ //换临时地址
                fileList: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + openid + "Title.jpg"],
                success: res => {

                  console.log("临时地址是：", res.fileList[0].tempFileURL)
                  title = res.fileList[0].tempFileURL + "?a=" + new Date().getTime()
                  console.log("显示时间", title)
                  that.onShow()
                  that1.setData({
                    name: res.data.姓名,
                    photo: res.data.手机号,
                    title: title
                  })


                },
                fail: console.error
              })





          },
          fail(res) {
            that.setData({
              name: "熊运生",
              photo: "15074704856",
              title: "cloud://first1-gbopy.6669-first1-gbopy-1302463837/oeSH35blJ_T-BpuMrbovBJsLn6uITitle.jpg" //如果没有数据，就显示图1
            })
            that.onShow()
          },

        }) //11结整      


      }
    })
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let thischa = this
    if (options.openid == null) {
      this.getOpenid();

      /* setTimeout(function () {
         //要延时执行的代码

         


        }, 1000) //延迟时间 这里是1秒      */


    } else {
      openid = options.openid
      getApp().globalData.openid = openid
      console.log("openid是：", openid, "  options是：", options.openid)
      console.log(options)
      getApp().globalData.name = options.name
      getApp().globalData.photo = options.photo
      title=options.title
      console.log("name是：", name, "photo是：", photo)
      //11
      wx.cloud.getTempFileURL({ //换临时地址
        fileList: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + openid + "Title.jpg"],
        success: res => {
          // fileList 是一个有如下结构的对象数组
          // [{
          //    fileID: 'cloud://xxx.png', // 文件 ID
          //    tempFileURL: '', // 临时文件网络链接
          //    maxAge: 120 * 60 * 1000, // 有效期
          // }]
          console.log("临时地址是：", res.fileList[0].tempFileURL)
         121           console.log("显示时间", title)
          thischa.onShow() //很重要，刷新显示

          thischa.setData({
            name: getApp().globalData.name,
            photo: getApp().globalData.photo,
            title: title
          })

        },
        fail: console.error
      })





    }



  },


  //button1
  button1: function () {

    console.log("openid是", getApp().globalData.openid)
    if (getApp().globalData.name == "null") { //不这样过不了审核，审核无图片不会通过           --失败.


      wx.previewImage({
        // urls: [getApp.globalData.Picture1]     
        urls: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/oeSH35blJ_T-BpuMrbovBJsLn6uIPicture1.jpg"]

      })
    } else {
      console.log("cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture1.jpg")
      wx.cloud.getTempFileURL({             //获取临时https文件--方便后面加?a=new Date().getTime()
        fileList: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture1.jpg"],
        success: res => {
          console.log(res.fileList[0].tempFileURL)
          wx.previewImage({
            //current: "cloud://first1-gbopy.6669-first1-gbopy-1302463837/"+getApp().globalData.openid+"Picture1.jpg", // 当前显示图片的http链接
            urls: [res.fileList[0].tempFileURL + "?a=" + new Date().getTime()] // 需要预览的图片http链接+时间，以保证获取的图片是最新的。不会从缓存加载
          })

          console.log(res.fileList)
        },
        fail: console.error
      })

    }

    console.log("cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture1.jpg")

  },
  //button2
  button2: function () {
    if (getApp().globalData.openid == null) {
      wx.previewImage({
        urls: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/oeSH35blJ_T-BpuMrbovBJsLn6uIPicture2.jpg"]
      })
      console.log("无openid")
    } else {
      console.log("cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture2.jpg")
      wx.cloud.getTempFileURL({
        fileList: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture2.jpg"],
        success: res => {

          console.log(res.fileList[0].tempFileURL)
          wx.previewImage({
            //current: "cloud://first1-gbopy.6669-first1-gbopy-1302463837/"+getApp().globalData.openid+"Picture1.jpg", // 当前显示图片的http链接
            urls: [res.fileList[0].tempFileURL + "?a=" + new Date().getTime()] // 需要预览的图片http链接+时间，以保证获取的图片是最新的。不会从缓存加载
          })

          console.log(res.fileList)
        },
        fail: console.error
      })






    }


  },





  //button3
  button3: function (e) {
    /*以前的，打开其它页面
    console.log(e.currentTarget.dataset.xz);
    var id=e.currentTarget.dataset.xz;
 
    wx.navigateTo({
      url: id,      
    })*/
    if (getApp().globalData.openid == null) {
      wx.previewImage({
        urls: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/oeSH35blJ_T-BpuMrbovBJsLn6uIPicture3.jpg"]
      })
      console.log("无openid")
    } else {
      console.log("cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture3.jpg")
      wx.cloud.getTempFileURL({
        fileList: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture3.jpg"],
        success: res => {

          console.log(res.fileList[0].tempFileURL)
          wx.previewImage({
            //current: "cloud://first1-gbopy.6669-first1-gbopy-1302463837/"+getApp().globalData.openid+"Picture1.jpg", // 当前显示图片的http链接
            urls: [res.fileList[0].tempFileURL + "?a=" + new Date().getTime()] // 需要预览的图片http链接+时间，以保证获取的图片是最新的。不会从缓存加载
          })

          console.log(res.fileList)
        },
        fail: console.error
      })


    }

  },
  //button4
  button4: function () {
    if (getApp().globalData.openid == null) {
      wx.previewImage({
        urls: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/oeSH35blJ_T-BpuMrbovBJsLn6uIPicture4.jpg"]
      })
      console.log("无openid")
    } else {
      console.log("cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture4.jpg")
      wx.cloud.getTempFileURL({
        fileList: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture4.jpg"],
        success: res => {

          console.log(res.fileList[0].tempFileURL)
          wx.previewImage({
            //current: "cloud://first1-gbopy.6669-first1-gbopy-1302463837/"+getApp().globalData.openid+"Picture1.jpg", // 当前显示图片的http链接
            urls: [res.fileList[0].tempFileURL + "?a=" + new Date().getTime()] // 需要预览的图片http链接+时间，以保证获取的图片是最新的。不会从缓存加载
          })

          console.log(res.fileList)
        },
        fail: console.error
      })

    }


  },



  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {



  },



  freeTell: function () { //打电话
    var photo = getApp().globalData.photo;
    console.log(getApp().globalData.photo);

    wx.makePhoneCall({
      phoneNumber: photo,

    })

  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

    //wx.clearStorage()    
    console.log("显示时间", "cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Title.jpg?a=" + new Date().getTime())



    console.log("显示onshow", title)
    this.setData({ //从当其页面返回时显示全局变量姓名与手机号
      name: getApp().globalData.name,
      photo: getApp().globalData.photo,
      openid: getApp().globalData.openid,
      title: title


    })








  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {


    return {
      title: '我的名片',
      path: '/pages/index/index?openid=' + this.data.openid + "&name=" + this.data.name + "&photo=" + this.data.photo+"&title="+this.data.title,    //转发时，转发带参数：以保证显示是当前用户的数据
      //imageUrl: '/images/home.png',
      imageUrl: title,         
      success: (res) => {
        console.log(res)
        // 分享成功
      },
      fail: (res) => {
        console.log(res)
        // 分享失败
      }
    }

  },
  onShareTimeline: function () {
    return {
      title: '我的名片',
      query: 'openid=' + this.data.openid + "&name=" + this.data.name + "&photo=" + this.data.photo+"&title="+this.data.title, //注意，&要放进“”里面           分享朋友圈时带参数：以保证显示是当前用户的数据
      //imageUrl: '/images/home.png',
      imageUrl: title,
      success: (res) => {
        console.log(res)
        // 分享成功
      }

    }

  }

})

 主页：展示---index.wxml的代码：

<view class="abc">
        <image  src="{{title}}"></image>
  
</view>
<text bind:tap="freeTell">
姓名：{{name}}

手机号：{{photo}} 

</text>
<view class="abc1">
    <button bindtap="button1" >我的小店</button>
    
    <button bindtap="button2">信用卡申请</button>
    <button  bindtap="button3"  data-xz="/pages/index1/index1">信用卡激活</button>
    <button bindtap="button4">微信银行</button>
</view>

3：设置页面：index2.js 代码：

// pages/index2/index2.js
const DB = wx.cloud.database().collection("list1") //连接数据库
let name = ""              //定义姓名
let photo = ""              //定义电话
let id = ""
let openid = ""
let Title = ""

Page({

  //上传图片       
  putimage: function (res1) {      //res1为接收button的参数
    let this1 = this;
    console.log(res1.currentTarget.dataset.data1)
    wx.chooseImage({
      success: chooseResult => {
        // 将图片上传至云存储空间
        wx.cloud.uploadFile({
          // 指定上传到的云路径
          cloudPath: openid+res1.currentTarget.dataset.data1+".jpg",
          // 指定要上传的文件的小程序临时文件路径
          filePath: chooseResult.tempFilePaths[0],
          // 成功回调
          success: res => {
            console.log('上传成功', res.fileID)          

            this1.setData({
              putlist: "上传到云存储成功"
            })

          },
          fail() {
            console.log('失败', res)
            this1.setData({
              putlist: "上传失败"
            })
          }
        })
      },
    })

  },


  //名字与手机号输入--查询
  addNane(reg) {
    console.log(reg.detail.value)
    name = reg.detail.value
  },
  getData(reg) {
    console.log(reg.detail.value)
    photo = reg.detail.value
  },

  //登陆
  chaData() {
    
    let thischa = this
    DB.doc(openid).get({

      success(res) {
        console.log("查到", res, "最抂", res.data._openid), //测试查全局变量         
          // app.globalData.fristname = res.data.姓名;
          getApp().globalData.name=res.data.姓名
          console.log(getApp().globalData.name), //测试查全局变量         
          getApp().globalData.photo=res.data.手机号
          getApp().globalData.openid=res.data._openid      
          thischa.setData({
            name: res.data.姓名,
            photo: res.data.手机号,
            
          })

      }
    })




  },
  //要删除的ID
  delDataInput(reg) {
    DB.get({
      success(res) {
        console.log("要删除的ID", reg)
        id = reg.detail.value
      }
    })
  },

  delData() {
    DB.doc(id).remove({
      success(res) {
        console.log("删除成功", res)
      },
      fail(res) {
        console.log("删除失败", res)
      }


    })
  },


  //添加数据
  addData() {
    var fthis=this
    DB.doc(openid).get({
      success: function(res) {
        // res.data 包含该记录的数据       //找到数据
        console.log("找到了，不新增",res.data)    
        
        DB.doc(openid).update({
          data: {
            // 表示将 done 字段置为 true
            姓名: name,
            手机号:photo
          },
          success: function(res) {
            fthis.chaData() 
            console.log(res)
          }
        })       
        

      },fail:function(res){
        //没找到就新增数据
        DB.add({
          data: {
            _id: openid,
            姓名: name,
            手机号: photo,
            封面: "",
            我的小店: "",
            申请信用卡: "",
            掌银见面礼: ""
          },
          success(res) {
            console.log("添加成功", res)
            console.log("openid", openid)
          },
          fail(res) {
            console.log("添加失败", res)
          }
        })


      }
    })


   

  },

  /**
   * 页面的初始数据
   */
  data: {
    putlist: "" ,  //显示结果
    //abc:getApp()


  },
  //查姓名:






  /**
   * 生命周期函数--监听页面加载
   */

  onLoad: function (options) {
    let this1 = this
    this.getOpenid();

  },
  //获取openid
  getOpenid() {
    let that = this;
    wx.cloud.callFunction({
      name: 'getOpenid',
      complete: res => {
        console.log('云函数获取到的openid:', res)
        openid = res.result.openid

        that.setData({
          openid: openid
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {   

  }
})

设置页面：index2.wxml 代码：

<button bind:tap="chaData" type="primary">登陆</button>
<button class="btn" type="primary" loading="{{loading}}" disabled="{{disabled}}" bindtap="putimage" data-data1="Title" >
  上传封面
</button>
<view>-----------</view>
<input placeholder="姓名" bindinput="addNane" value="{{name}}"  />
<view>-----------</view>
<input placeholder="手机号" bindinput="getData" value="{{photo}}" />
<view>-----------</view>

<view class="puttype">


<button class="btn" type="primary" loading="{{loading}}" disabled="{{disabled}}" bindtap="putimage" data-data1="Picture1">
  备份图片1
</button>
<button class="btn" type="primary" loading="{{loading}}" disabled="{{disabled}}" bindtap="putimage" data-data1="Picture2">
 备份图片2
</button>
<button class="btn" type="primary" loading="{{loading}}" disabled="{{disabled}}" bindtap="putimage" data-data1="Picture3">
  备份图片3
</button>
<button class="btn" type="primary" loading="{{loading}}" disabled="{{disabled}}" bindtap="putimage" data-data1="Picture4">
  备份图片4
</button>

</view>

<button bind:tap="addData" type="primary">添加数据</button>

<input placeholder="请填写要删除的ID" bindinput="delDataInput" hidden="{{true}}" />
<button bind:tap="delData" type="primary" hidden="{{true}}">删除数据</button>
<button bind:tap="putimage" type="primary" hidden="{{true}}">上传图片  --暂未开发</button>

<view>{{putlist}}</view>
<text selectable="{{true}}">
个人opendid: {{openid}}
  1：点登陆
 2:上传封面与下面4张图片 
 3:输入用户名与手机号 
 4：点添加数据
 
 copyright:熊运生 手机号:15074704856</text>

代码量很多，我还是比较喜欢C#和python..............以上只供学习参考。