手把手教你写个微信小程序
手把手教你写个微信小程序
很多人看完bmob快速入门,并完成了bmob的基本配置之后依然不知道如何下手去写自己的代码,那么跟着我一起来一步一步做个小程序吧。
工具:Bmob后端云
新建小程序项目
一、新建项目选择小程序项目,选择代码存放的硬盘路径,填入你的小程序 AppID,给你的项目起一个好听的名字,最后,点击确定,你就得到了你的小程序了开发者工具传送门
目录结构
- page
- index
- index.js
- index.wxml
- index.wxss
- logs
- logs.js
- logs.json
- logs.wxml
- logs.wxss
- index
- utils
- util.js
- app.js
- app.json
- app.wxss
- project.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文档传送门, 这个查询默认返回10条记录。当数据多了之后,一次查询很多数据,这样是不友好的,并不是说bmob查询数据慢,而是指如果将来你的用户在网速比较慢的情况使用你的小程序,请求数据等待时间过长,这个等待的过程也许会导致用户不再使用你的小程序。所以我们需要优化用户体验。那么将代码改造成一上拉加载更多。
//index.js
//获取应用实例
const app = getApp();
const Bmob = require('../../utils/bmob.js'); //每个需要使用到bmob的页面都需要引入这个jsPage({data: {detail:[], //页面数据pagination:0, //页码pageSize: 4, //每页数据nodata:true //无数据},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.message}`);}});},router(e) {//跳转至文章详情页const id = e.currentTarget.dataset.idwx.navigateTo({url: `../detail/detail?id=${id}`})},onReachBottom(){//下拉触底加载更多数据this.getData();}
})
上述代码中在日期处使用了timeagoJs
下载地址,下载timeagoJs
放到util
文件夹中,然后在app.js中引入。
//app.js
const 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吧。
手把手教你写个微信小程序相关推荐
- 手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件 微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图 由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
- 手把手教你开发人工智能微信小程序(1):线性回归模型
谈到人工智能.机器学习,我们可能会觉得很神秘,其实机器学习背后的理论并不复杂.就如同原子弹这么尖端的科技,其背后的理论就是一个很简单的公式: E = mc² 机器学习的最基础理论其实也不复杂,本文先尝 ...
- 零基础手把手教你制作一个微信小程序云开发-实验室仪器管理系统(二)
书接上文,我们了解到了怎么在微信开发者工具上新建一个空的云开发项目. 别急,你以为你能大展身手开始写代码了? 答案是否定的,首先你要先开始对小程序进行模块拆分 郦波老师有一句话说得很好:解决问题的最好 ...
- 手把手教你Nodejs获取微信小程序二维码
[小程序二维码和普通二维码] 下图左为小程序码,右为普通二维码, 普通二维码的生成比较简单,只用jquery就可以生成,详见:https://blog.csdn.net/uikoo9/article/ ...
- 手把手教你开发人工智能微信小程序(1):Hello WeChat!
每个开始学习编程的程序员,大约是从"Hello World!"开始的吧.就这样一个简简单单在屏幕上输出"Hello World!"字样的程序,帮助我们进入编程世 ...
- 教你解决Taro微信小程序中使用Echarts体积过大的问题
教你解决Taro微信小程序中使用Echarts体积过大的问题 背景 为什么选择Echarts? 单包超过2M,如何处理? 以为到此就结束了? 最后 背景 近期笔者在使用Taro进行微信小程序开发,当引 ...
- android微信分享走小程序流程,教你怎么把微信小程序分享到朋友圈
教你怎么把微信小程序分享到朋友圈 2020年07月13日 | 萬仟网移动技术 | 我要评论 7月8日收到邀请,可将小程序页面分享到朋友圈.适用于内容型页面的分享,不适用于有较多交互的页面分享.该功能为 ...
- 写在微信小程序上线之夜,我想对移动开发人员说别慌先玩玩AR压压惊!
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/54296650 本文出自[DylanAndroid的博客] 写在微信小程序上线之 ...
- 追书神器的api接口写的微信小程序
@这是我基于追书神器的api接口写的微信小程序 这是我小程序的二维码
最新文章
- 关于web.config中customErrors
- C++学习之路(六):实现一个String类
- 接上,进一步优化,LruCache缓存
- 微信、QQ都在用的腾讯云EB级对象存储架构剖析
- JAVA学习博客---2015.5
- html 设置font size,css font-size属性说明
- sql语句返回近似值
- 2016年PMP项目管理知识体系精髓总结
- 38. PHP 错误与异常处理(2)
- Jsp 中 include 指令和 include 动作的区别
- mysql简述cs结构与bs结构的区别_什么是BS和CS结构?
- gstarcad 2021|gstarcad pro2021(浩辰CAD) 64位附安装教程
- win7硬盘安装ubuntu经验
- 阿里云ECS服务器常用入门配置命令
- 笔记本电脑如何同时上内外网(通过usb外接网卡实现虚拟机连外网)
- word论文格式整理
- 立委科普:问答系统的前生今世
- 安装vpn和nat以及使用
- 国密算法TF32A09硬件加密芯片
- Capture Allegro学习笔记1