实验过程中遇到的坑:
- 一直无法获得数据库里的信息
- 初始化云开发环境却一直显示此环境ID不存在
- 选项卡样式设计问题
首先新建一个小程序,因为选择“云开发”会有很多的文件夹,所以选择不使用云开发。
在目录上新建云函数文件夹cloud,在 project.config.json 文件中的 "description": "项目配置文件" 语句下面添加一行代码: "cloudfunctionRoot":"cloud/", 这时候你就可以观察到cloud文件夹变成了云函数专用文件夹。
点击左上角云开发按钮,配置云开发环境,自我定义云开发的环境名称,而环境ID会自动生成。在app.js中初始化云开发的环境,其中env的值就是你的后台云开发环境的ID,可以在云开发界面里点击设置查看。
//app.js App({ onLaunch: function () { wx.cloud.init({ env:‘freeyun-qkjp8’ }) }, globalData: { userInfo: null } })
这里我遇见了第一个坑,就是环境ID是一个字符串需要用引号包围。
<view class="all"> <!-- 选项目录 --> <view class="dir" class="dir"> <block wx:for="{{choice}}" wx:key="{{index}}"> <view data-id="{{item.choice_id}}" class="dir_item {{focus==item.choice_id?'active':''}}" bindtap="setFocus">{{item.choice_name}}</view> </block> </view> <scroll-view class="content" scroll-y="true"> <block wx:for="{{choice[focus].info}}" wx:key="{{index}}"> <view data-id="{{item.child_id}}" class="content_item" bindtap="">{{item.child_name}}</view> </block> </scroll-view> </view>
界面分为头部的选项目录和下面的选项内容,点击不同标题切换内容,这里用for循环来实现,首先我们要了解在js文件中定义的choice具体格式是怎么样的:
choice:[ { choice_id:0, choice_name:'0', info:[ { child_id:'0', child_name:'内容00' }, { child_id:'1', child_name:'内容01' }, { child_id:'2', child_name:'内容02' } ] }, { choice_id:1, choice_name:'1', info:[] }, { choice_id:2, choice_name:'2', info:[] }, { choice_id:3, choice_name:'3', info:[] } ],
如果写在js中的data里,应该是这样定义的,但是我们要通过数据库来实现数据的导入,所以这里写为: choice:[],
然后在点击云开发的数据库新建集合,这里我取名为‘test1',在里面导入了JSON文档来插入记录,JSON文档内容如下:
{"_id":"94f505805f1c34e1007948a205c6e711","choice_id":0.0,"choice_name":"0","info":[{"child_id":0.0,"child_name":"内容00"},{"child_id":1.0,"child_name":"内容01"},{"child_id":2.0,"child_name":"内容02"},{"child_id":3.0,"child_name":"内容03"},{"child_id":4.0,"child_name":"内容04"},{"child_id":5.0,"child_name":"内容05"}]} {"_id":"94f505805f1c34e1007948a205c6e721","choice_id":1.0,"choice_name":"1","info":[{"child_id":0.0,"child_name":"内容10"}]} {"_id":"94f505805f1c34e1007948a205c6e731","choice_id":2.0,"choice_name":"2","info":[{"child_id":0.0,"child_name":"内容20"}]} {"_id":"94f505805f1c34e1007948a205c6e743","choice_id":3.0,"choice_name":"3","info":[{"child_id":2.0,"child_name":"内容32"}]}
导入成功后,最关键的一点是点击权限数据,选择所有用户可读,仅创建者可读写,如果不这样选择,那么将无法在小程序中获得数据!!!这里是我载的第二个坑。
然后在js文件中通过数据库相关的API来实现数据的获取,这里我把数据库的获取操作直接卸载了 onLoad 函数中,这样一加载页面就可以获得并且加载数据了,js文档代码如下:
//index.js //获取应用实例 const app = getApp() Page({ data: { choice: [], focus: 0 }, setFocus: function (e) { console.log('e', e) this.setData({ focus: e.currentTarget.dataset.id }) }, onLoad: function () { let that=this const db=wx.cloud.database() db.collection('test1').get({ success:res=>{ console.log('res.data',res) that.setData({ choice:res.data }) }, fail:err=>{ console.log('error',err) } }) } })
我们仔细看 onLoad 函数,这里的 let that = this 是因为如果在 wx.cloud 函数接口中直接使用 this.setData 来改变给page的data是无法实现的,因为在这个API中的this并不是全局的this,所以要在调用API之前定义局部变量 let that = this,实现数据的改变。关于 wx.cloud.database() 的相关应用可查看微信官方文档。
在设计页面样式时我在一个地方也稍微停顿了一会,以下是我的wxss文档代码:
/**index.wxss**/ .all{ height: 100%; width: 100%; position: fixed; } .dir{ display: flex; flex-direction: row; justify-content: start; align-items: center; height: 7%; } .dir_item{ padding: 15rpx; width: 25%; background-color: aqua; } .active{ background-color: azure; } .content{ width: 100%; height: 93%; } .content_item{ width: 100%; margin-top: 20rpx; background-color: blueviolet; font-size: larger; padding: 20rpx; height: 200rpx; color: antiquewhite; }
这里在,all里的 position:fixed 使得切换目录不会因为手指的下滑而滚动,而真正滚动的只有在 scroll-view 容器中的内容。
结果界面:
遇到的问题:
本来还想实现手指左右滑动的切换页面效果,我选择了swiper组件,但是我发现当我在一个页面滑动时另一个页面实际上也跟着滑动。暂时还没有去寻找解决方法。