手把手教你写个微信小程序
很多人看完bmob快速入门,并完成了bmob的基本配置之后依然不知道开通复合机小程序电话:4006-838-530如何下手去写自己的代码,那么跟着我一起来一步一步做个小程序吧。 工具:Bmob后端云
新建小程序项目一、新建项目选择小程序项目,选择代码存放的硬盘路径,填入你的小程序 AppID,给你的项目起一个好听的名字,最后,点击确定,你就得到了你的小程序了开发者工具传送门
目录结构page index index.jsindex.wxmlindex.wxsslogs logs.jslogs.jsonlogs.wxmllogs.wxssutils util.jsapp.jsapp.jsonapp.wxssproject.config.json
下载和安装BmobSDK一、把”bmob-min.js”和”underscore.js”放到相应的文件,例如放到utils中 二、接着是在app.js中加入下面两行代码进行全局初始化const Bmob = require('utils/bmob.js');Bmob.initialize("你的Application ID", "你的REST API Key");
数据库的搭建一、创建一个名字为detail
的表,然后点击添加列创建3个字段,一个一个的添加 – title
字段,String
类型,用于存放文章的标题 – image
字段,String
类型,用于存放文章的图片 – detail
字段 String
类型,用于存放文章的正文然后添加一些数据进行测试
列表页面实现一、去到index.js中 Ctrl + A
然后按Delete
清空这个页面,然后自己来写逻辑吧,首先我们需要引入bmob.js
然后在onLoad
小程序生命周期中去请求detail
表中的数据,让bmob和小程序完成第一次交互//index.js//获取应用实例const Bmob = require('../../utils/bmob.js'); //每个需要使用到bmob的页面都需要引入这个jsPage({ onLoad() { let Diary = Bmob.Object.extend("detail"); //引入detail这张表 let query = new Bmob.Query(Diary); query.find({ success: (results) => { console.log(results)//打印数据 }, error(error) { console.log(`查询失败: ${error.code } ${error.message}`); } }); },})
很多人看完bmob快速入门,并完成了bmob的基本配置之后依然不知道开通复合机小程序电话:4006-838-530如何下手去写自己的代码,那么跟着我一起来一步一步做个小程序吧。 工具:Bmob后端云
目录结构page index index.jsindex.wxmlindex.wxsslogs logs.jslogs.jsonlogs.wxmllogs.wxssutils util.jsapp.jsapp.jsonapp.wxssproject.config.json
下载和安装BmobSDK一、把”bmob-min.js”和”underscore.js”放到相应的文件,例如放到utils中 二、接着是在app.js中加入下面两行代码进行全局初始化const Bmob = require('utils/bmob.js');Bmob.initialize("你的Application ID", "你的REST API Key");
数据库的搭建一、创建一个名字为detail
的表,然后点击添加列创建3个字段,一个一个的添加 – title
字段,String
类型,用于存放文章的标题 – image
字段,String
类型,用于存放文章的图片 – detail
字段 String
类型,用于存放文章的正文然后添加一些数据进行测试
列表页面实现一、去到index.js中 Ctrl + A
然后按Delete
清空这个页面,然后自己来写逻辑吧,首先我们需要引入bmob.js
然后在onLoad
小程序生命周期中去请求detail
表中的数据,让bmob和小程序完成第一次交互//index.js//获取应用实例const Bmob = require('../../utils/bmob.js'); //每个需要使用到bmob的页面都需要引入这个jsPage({ onLoad() { let Diary = Bmob.Object.extend("detail"); //引入detail这张表 let query = new Bmob.Query(Diary); query.find({ success: (results) => { console.log(results)//打印数据 }, error(error) { console.log(`查询失败: ${error.code } ${error.message}`); } }); },})
const Bmob = require('utils/bmob.js');Bmob.initialize("你的Application ID", "你的REST API Key");
数据库的搭建一、创建一个名字为detail
的表,然后点击添加列创建3个字段,一个一个的添加 – title
字段,String
类型,用于存放文章的标题 – image
字段,String
类型,用于存放文章的图片 – detail
字段 String
类型,用于存放文章的正文然后添加一些数据进行测试
列表页面实现一、去到index.js中 Ctrl + A
然后按Delete
清空这个页面,然后自己来写逻辑吧,首先我们需要引入bmob.js
然后在onLoad
小程序生命周期中去请求detail
表中的数据,让bmob和小程序完成第一次交互//index.js//获取应用实例const Bmob = require('../../utils/bmob.js'); //每个需要使用到bmob的页面都需要引入这个jsPage({ onLoad() { let Diary = Bmob.Object.extend("detail"); //引入detail这张表 let query = new Bmob.Query(Diary); query.find({ success: (results) => { console.log(results)//打印数据 }, error(error) { console.log(`查询失败: ${error.code } ${error.message}`); } }); },})
Ctrl + A
然后按Delete
清空这个页面,然后自己来写逻辑吧,首先我们需要引入bmob.js
然后在onLoad
小程序生命周期中去请求detail
表中的数据,让bmob和小程序完成第一次交互//index.js//获取应用实例const Bmob = require('../../utils/bmob.js'); //每个需要使用到bmob的页面都需要引入这个jsPage({ onLoad() { let Diary = Bmob.Object.extend("detail"); //引入detail这张表 let query = new Bmob.Query(Diary); query.find({ success: (results) => { console.log(results)//打印数据 }, error(error) { console.log(`查询失败: ${error.code } ${error.message}`); } }); },})
这里完成了一次对bmob的数据查询,bmob文档传送门, 这个查询默认返回10条记录。当数据多了之后,一次查询很多数据,这样是不友好的,并不是说bmob查询数据慢,而是指如果将来你的用户在网速比较慢的情况使用你的小程序,请求数据等待时间过长,这个等待的过程也许会导致用户不再使用你的小程序。所以我们需要优化用户体验。那么将代码改造成一上拉加载更多。//index.js//获取应用实例const app = getApp();const Bmob = require('../../utils/bmob.js'); //每个需要使用到bmob的页面都需要引入这个jsPage({ data: { detail:[], //页面数据 pagination:0, //页码 pageSize: 4, //每页数据 nodata:true //无数据 }, 开通配镜服务小程序电话:4006-838-530 onLoad() { //初始页面第一次获取页面数据 this.getData(); }, getData(){ let Diary = Bmob.Object.extend("detail"); //引入detail这张表 let query = new Bmob.Query(Diary); query.limit(this.data.pageSize); //返回n条数据 query.skip(this.data.pageSize * this.data.pagination); //分页查询 query.descending('createdAt'); //已created列倒序 query.find({ success: (results) => { let data = []; //将得到的数据存入数组 for (let object of results) { data.push({ id: object.id, title: object.get('title'), image: object.get('image'), detail: object.get('detail'), createdAt: app.timeago(object.createdAt) //调用timeagoJs把日期转成N天前格式 }) } //判断是否有数据返回 if(data.length){ let detail = this.data.detail; //得到页面上已经存在的数据(数组) let pagination = this.data.pagination; //获取当前分页(第几页) detail.push.apply(detail, data); //将页面上面的数组和最新获取到的数组进行合并 pagination = pagination ? pagination+1 : 1; //此处用于判断是首次渲染数据还是下拉加载渲染数据 //更新数据 this.setData({ detail: detail, pagination: pagination }) }else{ //没有返回数据,页面不再加载数据 this.setData({ nodata: false }) } }, error(error) { console.log(`查询失败: ${error.code } ${error.messag开通登山包小程序电话:4006-838-530e}`); } }); }, router(e) { //跳转至文章详情页 const id = e.currentTarget.dataset.id wx.navigateTo({ url: `../detail/detail?id=${id}` }) }, onReachBottom(){ //下拉触底加载更多数据 this.getData(); }})
上述代码中在日期处使用了timeagoJs
下载地址,下载timeagoJs
放到util
文件夹中,然后在app.js中引入。//app.jsconst Bmob = require('./utils/bmob.js')const timeago = require("./utils/timeago.min.js");Bmob.initialize("你的Application ID", "你的REST API Key");App({ timeago(date){ return new timeago().format(date, 'zh_CN') }})
二、完成了列表页逻辑层之后,去到index.wxml编写视图层,视图层就简单许多了,得到的数据是一个数组,数组里面是一个json,用wx:for
方法把它渲染出来就好了<!--index.wxml--><view class='container'> <view class='pane' wx:for='{{detail}}' wx:key="index" data-id='{{item.id}}' bindtap='router'> <image src='{{item.image}}'mode='aspectFill'></image> <view class='content'> <text class='title'>{{ item.title }}</text> <text class='date'>{{ item.createdAt }}</text> </view> </view> <view wx:if='{{!nodata}}' class='nodata'>没有更多数据了</view></view>
三、来对页面进行一些美化,编写一样样式吧。毕竟这是一个看脸的社会/**index.wxss**/.container{ padding: 30rpx;}.pane{ width: 100%; margin-bottom:30rpx; border-radius: 5rpx; overflow: hidden; box-shadow: 0 0 10rpx rgba(0, 0, 0, .1) }.pane image{ width: 100%; height: 240rpx; display: block;}.pane .content{ background-color: #FFF; padding: 20rpx;}.pane .title{ display: block; font-size: 30rpx; font-weight: bold; margin-bottom: 20rpx;}.pane .date{ display: block; font-size: 24rpx; color: #999}.nodata{ text-align: center; font-size: 24rpx; color: #999}
如果你不喜欢写这些ui布局,或者前端ui,css比较差,可以直接用别人写好的现成的样式传送门。以上列表页面算是完成了。此时点击页面的时候,应该会报错,提示detail页面未配置,那来到app.json里面配置一下detail这个页面。文章的id已经传过来了,文章的详情页就当是自己的一个小练习,熟悉bmob吧。微信小程序
最新评论
好文推荐
好文推荐
666666