小程序使用云开发实现用户自定义背景图.pdf

⼩程序使⽤云开发实现⽤户⾃定义背景图 这次超⼈鸭实现的功能就是在⼩程序中可以让⽤户选择⾃⼰的背景图⽚作为展⽰，并且可以替换。 先看看图: image.png 1.当第⼀次使⽤的时候没有背景图就会让⽤户选择。 2.点击后就可以选择⽂件中的照⽚作为背景图。 image.png 3.再次点击背景图再次选择图⽚进⾏替换. image.png 功能就是如上所说，那要怎么实现呢，实现之前我先讲⼀下这次我⽤到的云开发相关，如果还不了解⼩程序的云开发，建议先去了解⼀下。 1.云开发相关第⼀项：云存储 image.png 腾讯为每个开发者提供了5g的免费容量，⽤户可以在⼩程序端上传⽂件到云存储进⾏保存，保存成功后云存储会返回⼀个真实的⽂件路径，最常 ⽤的就是⽤来存储照⽚。 2.云开发相关第⼆项: 云数据库 image.png ⽤户可以在⼩程序端操作云数据库执⾏增删改查操作，⽽且在⼩程序端，数据库的集合的权限默认是仅创建者可读写的，也就是说，不同的⽤户往 同个集合⾥⾯存信息，但是能读到的只有⾃⼰存进去的，别⼈是访问不了的，这也是我开发这个功能需要的模式 image.png 这就是实现更换背景图⽤到的两个⼩程序云开发相关，下⾯讲如何实现。 1.⾸先要分两种情况，⽤户第⼀次设置背景图和⾮第⼀次设置背景图,第⼀次设置是往数据库⾥⾯添加数据，⾮第⼀次就是更新数据，替换图 ⽚。 2.流程从⽤户点击设置背景图开始，先⽤⽤户选择图⽚，然后把图⽚保存到云存储⾥⾯，再把云存储返回的⽂件路径存储到数据库中，存储成 功后读取数据库，把⽂件路径赋值给data⾥⾯的变量。 这是⼤致的思路，下⾯结合代码讲具体实现 1.wxml <view class="bg-box"> <view class="profile-tip flex-c-c" catchtap="chooseImg" wx:if="{{!bgImg}}"> //通过是否有背景图控制出现隐藏 <text class="iconfont icon-tupian"></text> <text class="tip-text">选择你的背景图吧</text> </view> <image wx:if="{{bgImg}}" src="{{bgImg}}" class="bgImg" catchtap="updateImg" mode="aspectFill"></image> </view> css就不贴出来了。 2.js 第⼀步从⽤户点击选择图⽚开始:chooseImg,下⾯会涉及到挺多⼩程序的api，我会结合注释，要是不明⽩可以到官⽹查阅 chooseImg() { // ⽤户点击选择图⽚ wx.chooseImage({ // 这个api为让⽤户从⽂件中选择图⽚ count: 1, // 选择的照⽚数，只能⼀张 sizeType: ['original', 'compressed'], // 选择原图或是压缩图 sourceType: ['album'], // 从相册中选择，还可以再写⼀个选项通过拍照 success: (res) => { // 选择成功后,会返回⼀个数组，这个数组保存了照⽚的临时路径 wx.showLoading({ title: '加载中', }) let tempFilePath = res.tempFilePaths[0] // 因为我只存⼀张，所以是[0],获取这个图⽚的临时路径 let suffix = /\.\w+$/.exec(tempFilePath)[0] // 获取图⽚拓展名,供保存到云存储使⽤