范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-如何从零开始写出一个微信小程序

06-30 亚博APP
摘要:新建项目选择小法式项目,选择代码寄存的硬盘路径,填入你的小法式 AppID,给你的项目起一个好听的名 亚博

新建小法式项目

1、新建项目选择小法式项目,选择代码寄存的硬盘路径,填入你的小法式 AppID,给你的项目起一个好听的名字,最后,点击肯定,你就获得了你的小法式了开辟者东西传送门

目次布局

page index index.js index.wxml index.wxss

logs logs.js logs.json logs.wxml logs.wxss

utils util.js

app.js app.json app.wxss project.config.json

下载和安装BmobSDK

1、把bmob-min.js和underscore.js放到响应的文件,例如放到utils中

2、接着是在app.js中插手下面两行代码进行全局初始化

const Bmob = require(\'utils/bmob.js\');

Bmob.initialize(你的Application ID, 你的REST API Key);

1、建立一个名字为detail的表,然后点击添加列建立3个字段,一个一个的添加

title字段,String 类型,用在寄存文章的题目 image字段,String 类型,用在寄存文章的图片 detail字段 String类型,用在寄存文章的正文 然后添加一些数据进行测试

width=600

列表页面实现

1、去到index.js中 Ctrl + A然后按Delete清空这个页面,然后本身来写逻辑吧,起首我们需要引入bmob.js 然后在onLoad小法式生命周期中去要求detail表中的数据,让bmob和小法式完成第一次交互

//index.js //获得利用实例 const Bmob = require(\'../../utils/bmob.js\'); //每一个需要利用到bmob的页面都需要引入这个js Page({ 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的页面都需要引入这个js Page({ 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.id wx.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\') }})

2、完成了列表页逻辑层以后,去到index.wxml编写视图层,视图层就简单很多了,获得的数据是一个数组,数组里面是一个json,用wx:for方式把它衬着出来就行了

3、来对页面进行一些美化,编写一样样式吧。究竟这是一个看脸的社会

/**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}

以上列表页面算是完成了。此时点击页面的时辰,应当会报错,提醒detail页面未设置装备摆设,那来到app.json里面设置装备摆设一下detail这个页面。

保举浏览:微信小法式开辟教程 微信小法式

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.cqsLin.com

关于我们      深圳亚博定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数