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

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

上线前是这样的：

上线后是这样的：

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

由于要远程保管二维码图片：这里采用的免费云开发，自带云数据库、云存储：代码很多，好多是微信小程序自带的，重点在转发、分享朋友圈带多参数格式，查看图片时需转化成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">\n姓名：{{name}}\n\n手机号：{{photo}} \n\n</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}}">\n个人opendid: {{openid}}\n  1：点登陆\n 2:上传封面与下面4张图片 \n 3:输入用户名与手机号 \n 4：点添加数据\n \n copyright:熊运生 手机号:15074704856</text>

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

posted @ 2020-07-17 00:12 龍行PP 阅读(645) 评论(0) 编辑收藏举报

刷新页面返回顶部

龍行PP

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

公告