由于工作需要，我和同事们经常需要各种自已营销扫码的二维码，二维码一多就不好查找了，微信小程序用的人多，方便查找，能转发、朋友圈分享小程序（官网已上线）,所以用微信小程序开发我的名片，集中保管二维码，方便查找，我的同事再也不怕找不到他的营销二维码了。这是我第一次开发微信小程序，边做边学，以此记下心得。
上线前是这样的：
上线后是这样的：
有些失望吧，是因为我是个人开发者，开发微信小程序上线需要腾讯审核，带营销、测试等字样，个人开发者开发的程序几乎是限制了。。（怎样合理规僻审核有侍研究），不过没关系，功能已全部实现了。能转发给朋友或分享朋友圈自带参数，保证显示是分享用户的数据。
由于要远程保管二维码图片：这里采用的免费云开发，自带云数据库、云存储：代码很多，好多是微信小程序自带的，重点在转发、分享朋友圈带多参数格式，查看图片时需转化成http临时文件地址，再带?a=new Date().getTime() 这种无用的动态变量。以保证看图片时是最新的图片，不然微信小程序会缓存图片，总是显示老图
1：启动小程序自动连接云环境,：app.js文件里：
1 App({ 2 3 /** 4 * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） 5 */ 6 onLaunch: function () { 7 wx.cloud.init({ //连接云环境 8 env:"first1-gbopy" //环境ID：first1-gbopy 9 }) 10 11 }, 12 globalData:{ //全局变量 13 name:"", 14 photo:"", 15 Title:"", 16 Picture1:"", 17 Picture2:"", 18 Picture4:"", 19 Picture4:"", 20 openid:"" 21 22 }, 23 24 25 /** 26 * 当小程序启动，或从后台进入前台显示，会触发 onShow 27 */ 28 onShow: function (options) { 29 30 }, 31 32 /** 33 * 当小程序从前台进入后台，会触发 onHide 34 */ 35 onHide: function () { 36 37 }, 38 39 /** 40 * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 41 */ 42 onError: function (msg) { 43 44 } 45 })
手动创建云函数：getOpenid 。 index.js里的代码要返回openid ，到时以openid的值设置成数据库字段"_id"的值，这样能保证数据的唯一性。
1 // 云函数入口文件 2 const cloud = require('wx-server-sdk') 3 4 cloud.init() 5 6 // 云函数入口函数 7 exports.main = async (event, context) => { 8 const wxContext = cloud.getWXContext() 9 10 //获取姓名 openid 12 13 return { 14 event, 15 openid: wxContext.OPENID, 16 appid: wxContext.APPID, 17 unionid: wxContext.UNIONID, 18 } 19 }
2：主页面：我的名片---index.js代码：
1 const DB = wx.cloud.database().collection("list1") //连接数据库 2 let openid = "" 3 let name = "" 4 let photo = "" 5 let title = "" 6 var that1 = this 7 Page({ 8 9 /** 10 * 页面的初始数据 11 */ 12 data: { 13 //name:getApp().globalData.name 14 15 16 17 }, 18 19 getOpenid() { //获取云函数 20 let that = this; 21 wx.cloud.callFunction({ 22 name: 'getOpenid', 23 complete: res => { 24 console.log('云函数获取到的openid:', res) 25 openid = res.result.openid 26 that.setData({ 27 openid: openid 28 }) 29 30 //11获取 31 DB.doc(openid).get({ 32 success(res) { 33 console.log("查到", res, "最抂", res.data._openid), //查全局变量 34 // app.globalData.fristname = res.data.姓名; 35 getApp().globalData.name = res.data.姓名 36 console.log(getApp().globalData.name), //查全局变量 37 getApp().globalData.photo = res.data.手机号 38 getApp().globalData.openid = res.data._openid 39 console.log("cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + openid + "Title.jpg"), //查全局变量 40 41 42 wx.cloud.getTempFileURL({ //换临时地址 43 fileList: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + openid + "Title.jpg"], 44 success: res => { 45 46 console.log("临时地址是：", res.fileList[0].tempFileURL) 47 title = res.fileList[0].tempFileURL + "?a=" + new Date().getTime() 48 console.log("显示时间", title) 49 that.onShow() 50 that1.setData({ 51 name: res.data.姓名, 52 photo: res.data.手机号, 53 title: title 54 }) 55 56 57 }, 58 fail: console.error 59 }) 60 61 62 63 64 65 }, 66 fail(res) { 67 that.setData({ 68 name: "熊运生", 69 photo: "15074704856", 70 title: "cloud://first1-gbopy.6669-first1-gbopy-1302463837/oeSH35blJ_T-BpuMrbovBJsLn6uITitle.jpg" //如果没有数据，就显示图1 71 }) 72 that.onShow() 73 }, 74 75 }) //11结整 76 77 78 } 79 }) 80 }, 81 82 83 /** 84 * 生命周期函数--监听页面加载 85 */ 86 onLoad: function (options) { 87 let thischa = this 88 if (options.openid == null) { 89 this.getOpenid(); 90 91 /* setTimeout(function () { 92 //要延时执行的代码 93 94 95 96 97 }, 1000) //延迟时间 这里是1秒 */ 98 99 100 } else { 101 openid = options.openid 102 getApp().globalData.openid = openid 103 console.log("openid是：", openid, " options是：", options.openid) 104 console.log(options) 105 getApp().globalData.name = options.name 106 getApp().globalData.photo = options.photo 107 title=options.title 108 console.log("name是：", name, "photo是：", photo) 109 //11 110 wx.cloud.getTempFileURL({ //换临时地址 111 fileList: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + openid + "Title.jpg"], 112 success: res => { 113 // fileList 是一个有如下结构的对象数组 114 // [{ 115 // fileID: 'cloud://xxx.png', // 文件 ID 116 // tempFileURL: '', // 临时文件网络链接 117 // maxAge: 120 * 60 * 1000, // 有效期 118 // }] 119 console.log("临时地址是：", res.fileList[0].tempFileURL) 120 121 console.log("显示时间", title) 122 thischa.onShow() //很重要，刷新显示 123 124 thischa.setData({ 125 name: getApp().globalData.name, 126 photo: getApp().globalData.photo, 127 title: title 128 }) 129 130 }, 131 fail: console.error 132 }) 133 134 135 136 137 138 } 139 140 141 142 }, 143 144 145 //button1 146 button1: function () { 147 148 console.log("openid是", getApp().globalData.openid) 149 if (getApp().globalData.name == "null") { //不这样过不了审核，审核无图片不会通过 --失败. 150 151 152 wx.previewImage({ 153 // urls: [getApp.globalData.Picture1] 154 urls: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/oeSH35blJ_T-BpuMrbovBJsLn6uIPicture1.jpg"] 155 156 }) 157 } else { 158 console.log("cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture1.jpg") 159 wx.cloud.getTempFileURL({ //获取临时https文件--方便后面加?a=new Date().getTime() 160 fileList: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture1.jpg"], 161 success: res => { 162 console.log(res.fileList[0].tempFileURL) 163 wx.previewImage({ 164 //current: "cloud://first1-gbopy.6669-first1-gbopy-1302463837/"+getApp().globalData.openid+"Picture1.jpg", // 当前显示图片的http链接 165 urls: [res.fileList[0].tempFileURL + "?a=" + new Date().getTime()] // 需要预览的图片http链接+时间，以保证获取的图片是最新的。不会从缓存加载 166 }) 167 168 console.log(res.fileList) 169 }, 170 fail: console.error 171 }) 172 173 } 174 175 console.log("cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture1.jpg") 176 177 }, 178 //button2 179 button2: function () { 180 if (getApp().globalData.openid == null) { 181 wx.previewImage({ 182 urls: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/oeSH35blJ_T-BpuMrbovBJsLn6uIPicture2.jpg"] 183 }) 184 console.log("无openid") 185 } else { 186 console.log("cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture2.jpg") 187 wx.cloud.getTempFileURL({ 188 fileList: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture2.jpg"], 189 success: res => { 190 191 console.log(res.fileList[0].tempFileURL) 192 wx.previewImage({ 193 //current: "cloud://first1-gbopy.6669-first1-gbopy-1302463837/"+getApp().globalData.openid+"Picture1.jpg", // 当前显示图片的http链接 194 urls: [res.fileList[0].tempFileURL + "?a=" + new Date().getTime()] // 需要预览的图片http链接+时间，以保证获取的图片是最新的。不会从缓存加载 195 }) 196 197 console.log(res.fileList) 198 }, 199 fail: console.error 200 }) 201 202 203 204 205 206 207 } 208 209 210 }, 211 212 213 214 215 216 //button3 217 button3: function (e) { 218 /*以前的，打开其它页面 219 console.log(e.currentTarget.dataset.xz); 220 var id=e.currentTarget.dataset.xz; 221 222 wx.navigateTo({ 223 url: id, 224 })*/ 225 if (getApp().globalData.openid == null) { 226 wx.previewImage({ 227 urls: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/oeSH35blJ_T-BpuMrbovBJsLn6uIPicture3.jpg"] 228 }) 229 console.log("无openid") 230 } else { 231 console.log("cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture3.jpg") 232 wx.cloud.getTempFileURL({ 233 fileList: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture3.jpg"], 234 success: res => { 235 236 console.log(res.fileList[0].tempFileURL) 237 wx.previewImage({ 238 //current: "cloud://first1-gbopy.6669-first1-gbopy-1302463837/"+getApp().globalData.openid+"Picture1.jpg", // 当前显示图片的http链接 239 urls: [res.fileList[0].tempFileURL + "?a=" + new Date().getTime()] // 需要预览的图片http链接+时间，以保证获取的图片是最新的。不会从缓存加载 240 }) 241 242 console.log(res.fileList) 243 }, 244 fail: console.error 245 }) 246 247 248 } 249 250 }, 251 //button4 252 button4: function () { 253 if (getApp().globalData.openid == null) { 254 wx.previewImage({ 255 urls: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/oeSH35blJ_T-BpuMrbovBJsLn6uIPicture4.jpg"] 256 }) 257 console.log("无openid") 258 } else { 259 console.log("cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture4.jpg") 260 wx.cloud.getTempFileURL({ 261 fileList: ["cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Picture4.jpg"], 262 success: res => { 263 264 console.log(res.fileList[0].tempFileURL) 265 wx.previewImage({ 266 //current: "cloud://first1-gbopy.6669-first1-gbopy-1302463837/"+getApp().globalData.openid+"Picture1.jpg", // 当前显示图片的http链接 267 urls: [res.fileList[0].tempFileURL + "?a=" + new Date().getTime()] // 需要预览的图片http链接+时间，以保证获取的图片是最新的。不会从缓存加载 268 }) 269 270 console.log(res.fileList) 271 }, 272 fail: console.error 273 }) 274 275 } 276 277 278 }, 279 280 281 282 /** 283 * 生命周期函数--监听页面初次渲染完成 284 */ 285 onReady: function () { 286 287 288 289 }, 290 291 292 293 freeTell: function () { //打电话 294 var photo = getApp().globalData.photo; 295 console.log(getApp().globalData.photo); 296 297 wx.makePhoneCall({ 298 phoneNumber: photo, 299 300 }) 301 302 }, 303 /** 304 * 生命周期函数--监听页面显示 305 */ 306 onShow: function () { 307 308 //wx.clearStorage() 309 console.log("显示时间", "cloud://first1-gbopy.6669-first1-gbopy-1302463837/" + getApp().globalData.openid + "Title.jpg?a=" + new Date().getTime()) 310 311 312 313 console.log("显示onshow", title) 314 this.setData({ //从当其页面返回时显示全局变量姓名与手机号 315 name: getApp().globalData.name, 316 photo: getApp().globalData.photo, 317 openid: getApp().globalData.openid, 318 title: title 319 320 321 }) 322 323 324 325 326 327 328 329 330 }, 331 332 /** 333 * 生命周期函数--监听页面隐藏 334 */ 335 onHide: function () { 336 337 }, 338 339 /** 340 * 生命周期函数--监听页面卸载 341 */ 342 onUnload: function () { 343 344 }, 345 346 /** 347 * 页面相关事件处理函数--监听用户下拉动作 348 */ 349 onPullDownRefresh: function () { 350 351 }, 352 353 /** 354 * 页面上拉触底事件的处理函数 355 */ 356 onReachBottom: function () { 357 358 }, 359 360 /** 361 * 用户点击右上角分享 362 */ 363 onShareAppMessage: function () { 364 365 366 return { 367 title: '我的名片', 368 path: '/pages/index/index?openid=' + this.data.openid + "&name=" + this.data.name + "&photo=" + this.data.photo+"&title="+this.data.title, //转发时，转发带参数：以保证显示是当前用户的数据 369 //imageUrl: '/images/home.png', 370 imageUrl: title, 371 success: (res) => { 372 console.log(res) 373 // 分享成功 374 }, 375 fail: (res) => { 376 console.log(res) 377 // 分享失败 378 } 379 } 380 381 }, 382 onShareTimeline: function () { 383 return { 384 title: '我的名片', 385 query: 'openid=' + this.data.openid + "&name=" + this.data.name + "&photo=" + this.data.photo+"&title="+this.data.title, //注意，&要放进“”里面 分享朋友圈时带参数：以保证显示是当前用户的数据 386 //imageUrl: '/images/home.png', 387 imageUrl: title, 388 success: (res) => { 389 console.log(res) 390 // 分享成功 391 } 392 393 } 394 395 } 396 397 })
主页：展示---index.wxml的代码：
1 <view class="abc"> 2 <image src="{{title}}"></image> 3 4 </view> 5 <text bind:tap="freeTell"> 姓名：{{name}} 手机号：{{photo}} </text> 6 <view class="abc1"> 7 <button bindtap="button1" >我的小店</button> 8 9 <button bindtap="button2">信用卡申请</button> 10 <button bindtap="button3" data-xz="/pages/index1/index1">信用卡激活</button> 11 <button bindtap="button4">微信银行</button> 12 </view>
3：设置页面：index2.js 代码：
1 // pages/index2/index2.js 2 const DB = wx.cloud.database().collection("list1") //连接数据库 3 let name = "" //定义姓名 4 let photo = "" //定义电话 5 let id = "" 6 let openid = "" 7 let Title = "" 8 9 Page({ 10 11 //上传图片 12 putimage: function (res1) { //res1为接收button的参数 13 let this1 = this; 14 console.log(res1.currentTarget.dataset.data1) 15 wx.chooseImage({ 16 success: chooseResult => { 17 // 将图片上传至云存储空间 18 wx.cloud.uploadFile({ 19 // 指定上传到的云路径 20 cloudPath: openid+res1.currentTarget.dataset.data1+".jpg", 21 // 指定要上传的文件的小程序临时文件路径 22 filePath: chooseResult.tempFilePaths[0], 23 // 成功回调 24 success: res => { 25 console.log('上传成功', res.fileID) 26 27 this1.setData({ 28 putlist: "上传到云存储成功" 29 }) 30 31 }, 32 fail() { 33 console.log('失败', res) 34 this1.setData({ 35 putlist: "上传失败" 36 }) 37 } 38 }) 39 }, 40 }) 41 42 }, 43 44 45 //名字与手机号输入--查询 46 addNane(reg) { 47 console.log(reg.detail.value) 48 name = reg.detail.value 49 }, 50 getData(reg) { 51 console.log(reg.detail.value) 52 photo = reg.detail.value 53 }, 54 55 //登陆 56 chaData() { 57 58 let thischa = this 59 DB.doc(openid).get({ 60 61 success(res) { 62 console.log("查到", res, "最抂", res.data._openid), //测试查全局变量 63 // app.globalData.fristname = res.data.姓名; 64 getApp().globalData.name=res.data.姓名 65 console.log(getApp().globalData.name), //测试查全局变量 66 getApp().globalData.photo=res.data.手机号 67 getApp().globalData.openid=res.data._openid 68 thischa.setData({ 69 name: res.data.姓名, 70 photo: res.data.手机号, 71 72 }) 73 74 } 75 }) 76 77 78 79 80 }, 81 //要删除的ID 82 delDataInput(reg) { 83 DB.get({ 84 success(res) { 85 console.log("要删除的ID", reg) 86 id = reg.detail.value 87 } 88 }) 89 }, 90 91 delData() { 92 DB.doc(id).remove({ 93 success(res) { 94 console.log("删除成功", res) 95 }, 96 fail(res) { 97 console.log("删除失败", res) 98 } 99 100 101 }) 102 }, 103 104 105 //添加数据 106 addData() { 107 var fthis=this 108 DB.doc(openid).get({ 109 success: function(res) { 110 // res.data 包含该记录的数据 //找到数据 111 console.log("找到了，不新增",res.data) 112 113 DB.doc(openid).update({ 114 data: { 115 // 表示将 done 字段置为 true 116 姓名: name, 117 手机号:photo 118 }, 119 success: function(res) { 120 fthis.chaData() 121 console.log(res) 122 } 123 }) 124 125 126 },fail:function(res){ 127 //没找到就新增数据 128 DB.add({ 129 data: { 130 _id: openid, 131 姓名: name, 132 手机号: photo, 133 封面: "", 134 我的小店: "", 135 申请信用卡: "", 136 掌银见面礼: "" 137 }, 138 success(res) { 139 console.log("添加成功", res) 140 console.log("openid", openid) 141 }, 142 fail(res) { 143 console.log("添加失败", res) 144 } 145 }) 146 147 148 } 149 }) 150 151 152 153 154 }, 155 156 /** 157 * 页面的初始数据 158 */ 159 data: { 160 putlist: "" , //显示结果 161 //abc:getApp() 162 163 164 }, 165 //查姓名: 166 167 168 169 170 171 172 /** 173 * 生命周期函数--监听页面加载 174 */ 175 176 onLoad: function (options) { 177 let this1 = this 178 this.getOpenid(); 179 180 }, 181 //获取openid 182 getOpenid() { 183 let that = this; 184 wx.cloud.callFunction({ 185 name: 'getOpenid', 186 complete: res => { 187 console.log('云函数获取到的openid:', res) 188 openid = res.result.openid 189 190 that.setData({ 191 openid: openid 192 }) 193 } 194 }) 195 }, 196 197 /** 198 * 生命周期函数--监听页面初次渲染完成 199 */ 200 onReady: function () { 201 202 }, 203 204 /** 205 * 生命周期函数--监听页面显示 206 */ 207 onShow: function () { 208 209 }, 210 211 /** 212 * 生命周期函数--监听页面隐藏 213 */ 214 onHide: function () { 215 216 }, 217 218 /** 219 * 生命周期函数--监听页面卸载 220 */ 221 onUnload: function () { 222 223 }, 224 225 /** 226 * 页面相关事件处理函数--监听用户下拉动作 227 */ 228 onPullDownRefresh: function () { 229 230 }, 231 232 /** 233 * 页面上拉触底事件的处理函数 234 */ 235 onReachBottom: function () { 236 237 }, 238 239 /** 240 * 用户点击右上角分享 241 */ 242 onShareAppMessage: function () { 243 244 } 245 })
设置页面：index2.wxml 代码：
1 <button bind:tap="chaData" type="primary">登陆</button> 2 <button class="btn" type="primary" loading="{{loading}}" disabled="{{disabled}}" bindtap="putimage" data-data1="Title" > 3 上传封面 4 </button> 5 <view>-----------</view> 6 <input placeholder="姓名" bindinput="addNane" value="{{name}}" /> 7 <view>-----------</view> 8 <input placeholder="手机号" bindinput="getData" value="{{photo}}" /> 9 <view>-----------</view> 10 11 <view class="puttype"> 12 13 14 <button class="btn" type="primary" loading="{{loading}}" disabled="{{disabled}}" bindtap="putimage" data-data1="Picture1"> 15 备份图片1 16 </button> 17 <button class="btn" type="primary" loading="{{loading}}" disabled="{{disabled}}" bindtap="putimage" data-data1="Picture2"> 18 备份图片2 19 </button> 20 <button class="btn" type="primary" loading="{{loading}}" disabled="{{disabled}}" bindtap="putimage" data-data1="Picture3"> 21 备份图片3 22 </button> 23 <button class="btn" type="primary" loading="{{loading}}" disabled="{{disabled}}" bindtap="putimage" data-data1="Picture4"> 24 备份图片4 25 </button> 26 27 </view> 28 29 <button bind:tap="addData" type="primary">添加数据</button> 30 31 <input placeholder="请填写要删除的ID" bindinput="delDataInput" hidden="{{true}}" /> 32 <button bind:tap="delData" type="primary" hidden="{{true}}">删除数据</button> 33 <button bind:tap="putimage" type="primary" hidden="{{true}}">上传图片 --暂未开发</button> 34 35 <view>{{putlist}}</view> 36 <text selectable="{{true}}"> 个人opendid: {{openid}} 1：点登陆 2:上传封面与下面4张图片 3:输入用户名与手机号 4：点添加数据 copyright:熊运生 手机号:15074704856</text>
代码量很多，我还是比较喜欢C#和python..............以上只供学习参考。