应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

Runlin微信小程序系列教程一:从零开始写一个demo《上》

发布时间:2024-01-01 00:00 浏览次数:29

本文已赢得原作者许可


微信小程序公测至今也存有20天左右,也存有很多人做出了很多极好的DEMO并公布至github了。前几日看到了豆瓣电影这个demo,感觉很极好,也跟著搞了一个,做为备考稳固文档API用。


第一节只写下一个首页的展现,数据用的就是自己写下的交互式的数据


新建一个demo,不要采用微信自带的DEMO,轻易从零开始写下起至:


首先建立3个文件:


app.json


app.js


apps.wxss


app.json : 主要写下布局项:内容如下,具体内容的每个key值对应的意思,这里就不再细说了,可以看看我之前的布局指南,


{


"pages":[


"pages/index/index",


"pages/rank/rank",


],


"window":{


"enablePullDownRefresh":true,


"backgroundColor":"#eee",


"navigationBarTitleText": "上导航系统标题文字",


"navigationBarTextStyle":"white"


},


"tabBar": {


"color": "#d7ced5",


"selectedColor": "#535f71",


"borderStyle": "white",


"backgroundColor": "#f9f9f9",


"list": [


{


"pagePath": "pages/index/index",


"text": "所推荐电影",


"iconPath": "images/board.png",


"selectedIconPath": "images/board-actived.png"


},


{


"pagePath": "pages/rank/rank",


"text": "北美票房",


"iconPath": "images/note.png",


"selectedIconPath": "images/note-actived.png"


}


]


},


"networkTimeout": {


"request": 10000,


"downloadFile": 9000,


"uploadFile":8000,


"connectSocket":7000


},


"debug": true


}


app.js : 主要用以登记注册一个小程序的实例


App({


onLaunch: function () {


},


onShow: function () {


},


onHide: function () {


},


globalData: 'I am global data'


});


app.wxss : 公用样式,基本等同于CSS,暂时不须要写下内容。


建立不好3个文件后,就可以已经开始写下页面的内容了:


新创建2个文件夹images和pages,一个摆图片一,个摆页面。


目前只pages下面再建立2个文件夹index和rank,每个文件下分别建立json,js,wxml,wxss文件,此时目录如下:


虽然不一定4个文件类型都须要使用,但为了之后便利,建议还是先建立不好,须要使用的时候就比较便利了,不必再回去建立。


首先写下index.js: (为了演示循环数组,data下面的moivelist还须要多激活几份,这里只写下了一份出,imgsrc路径必须写下不好)


Page({


data:{


moivelist:[{


imgsrc: "../../images/AN2.jpg",


title: "肖申克的救赎",


introduce: "The shrakwos RedenpeTion(1994)",


author: "弗兰克*德拉立邦",


rank: "9.6"


}


]


}


,


onLoad: function(options) {


console.log(1);


},


onReady: function() {


// Do something when page ready.


},


onShow: function() {


// Do something when page show.


},


onHide: function() {


// Do something when page hide.


},


onUnload: function() {


// Do something when page close.


},


onPullDownRefresh: function() {


// Do something when pull down


},


// Event handler.


viewTap: function() {


this.setData({


text: 'Set some data for updating view.'


})


}


})


这里发生了很多on函数事件,对应页面的生命周期每个过程对应的事件,这里暂时先高度关注data对象


小程序就是以数据驱动的,页面进去的时候通过动态获取数据,通过{{xxx}}将数据存取,并将数据图形至视图层,这里先以一个交互式的data数据演示


然后写下index.wxml文件:


从上面表明的首页的图片来看,主要就是1个标题,以及下面一个列表,列表用过循环去图形出来所有的数据


标题: 标题比较简单,主要就是写下css



豆瓣电影top250



这里主要谈下面的列表循环,可以辨认出我们只要写下不好列表中的第一个就可以了,其他的通过循环去展现


列表主要分成左中右三块,分别为图片,内容,以及评分3块


//循环图形,wx:for="{{ xxx }}" 代表循环js文件里面的data数据中的xxx



//微信循环时会得出每个项目的内容以及每个项目的负号,预设为item和index,item.imgsrc意指对象的(imgsrc) key值


图片:



内容:




{{item.title}}




{{item.introduce}}




< text >{{item.author}}




评分:


{{item.rank}}




基本都这里wxml就完结了,样式主要通过wxss去操作方式,样式比较简单,就不写下了,主要谈一下左中右这三块


通过将左中右这三块的父级设置为display:flex;


左边和右边都设置为紧固rpx,中间设置为flex:1。


这样写下代表中间这一块的内容填满:左边和右边布局后生下来的空间 ,即为左右布局不好后,剩下多少,flex:1就等同于多少。


第一节项目代码见到:demo1


https://github.com/linrunzheng/wx-samll-demo

TAG标签:
阅读推荐