当前位置:首页 > 天道酬勤 > 正文内容

微信我的小程序怎么编辑(微信小程序这题我会第70关)

张世龙2021年12月21日 07:39天道酬勤520

很多人看了bmob快速入门,完成简单的基本结构后也不知道怎么写自己的代码,和我一起一步步编一个小程序吧。 (工具: bmob后端云)

新小程序

一、新项目选择小程序,选择代码保存的硬盘路径,填写小程序的AppID,给项目取个好名字,最后,点击“确定”,小程序的开发者工具传输

目录结构

页面

洛杉矶航空

logs.json

logs.wxml

logs.wxss

索引号

索引. wxml

索引号wxss

索引

日志

utils

美国全国广播公司

美国职棒大联盟

美国职棒大联盟

苹果公司

项目配置. JSON

下载和安装BmobSDK

另一方面,将“bmob-min.js”和“underscore.js”放入适当的文件,例如utils

二、接着在app.js中放入以下两行代码进行全局初始化

constbmob=require (实用程序/宝马. JS );

Bmob.initialize ('你的APP身份证','你的rest API密钥' ); 数据库的构建

另一方面,创建一个名为detail的表,单击“添加列”创建三个字段,每次添加一个

存储title字段、String类型和文章的标题

用于存储图像字段、字符串类型和文章的图像

存储文章正文的详细信息字段字符串类型

为了测试添加一些数据

列表页的实现

一、去index.js的Ctrl A,按Delete清空这一页,然后自己写逻辑吧。 首先,需要部署bmob.js,在onLoad小程序的生命周期中请求detail表数据,然后bmob和小程序完成第一次交互

在这里,向bmob的数据查询、bmob文档传送门完成了。 这个查询缺省返回10条记录。 数据多了之后,一次查询很多数据是不友好的。 并不是说bmob查询数据慢,而是如果将来用户在网速慢的情况下使用小程序,请求数据的等待时间过长,则在这个等待过程中用户可能会停止使用小程序。 所以需要优化用户体验。 那么,把代码改造为上拉加载更多。

//index.js//获取APP实例const app=getApp (; constbmob=require (' ././utils/bmob.js ' ); bmob中使用的每个页面都需要导入该jspage(data: ) detail: )、//页面数据

页面:0,//页码

pageSize: 4,//每页的数据

no数据:真//无数据

(、

onLoad () )。

//初始页面第一次获取页面数据

this.getData (;

(、

getData () letdiary=bmob.object.extend ) '详细信息); 引入名为detail的表

let查询=网络移动.查询(每日;

查询限制(this .数据页; //n条数据返回

query.skip (this .数据页面* this .数据页面); //分页查询

查询('创建的at ' ); created列颠倒了

query.find ({成功: }结果)={ let数据=[ ]; //将得到的数据存入数组

for(letobjectofresults ) {

推(id :对象id,标题:对象. get )、图像:对象. get )、详细信息:

() )

//判断数据是否返回

if (数据长度) { let详细信息=this .数据详细信息; //获得页面上已经存在的数据(数组)

let页面=this.data .页面; //获取当前的分页符(第几页) ) ) ) ) ) ) ) ) ) ) ) )。

详细信息,数据; //将页面上的数组与最新获取的数组合并

pagination=pagination? 分区1 : 1; //在此,判断是最初渲染渲染数据,还是用下拉列表加载

//更新数据

this.setdata({de}

tail: detail, pagination: pagination }) }else{ //没有返回数据,页面不再加载数据 this.setData({ nodata: false }) } }, error(error) { console.log(`查询失败: ${error.code } ${error.message}`); } }); }, 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吧。

扫描二维码推送至手机访问。

版权声明:本文由花开半夏のブログ发布,如需转载请注明出处。

本文链接:https://www.zhangshilong.cn/work/26174.html

分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。