小程序开发五:项目的正式启动(项目的模板介绍)

上一节我们介绍了“调试器”各个栏目的用法,这一节我们将正式启动项目,想想是不是有点小激动呢😂
话不多说,搞起~~~~~~

首页我们新建好一个名为“SMDemo”的项目,选择测试appID,之后保存到桌面上的目录,成功打开,如下图


image.png

你会发现项目有了默认的模板,那么就给大家介绍一下项目模板的框架(空项目的话,大家逐个删掉对应的页面文件夹,并修改app.json里的pages的文件索引即可,这里不做过多介绍)


【index】

项目启动默认的初始页面

【logs】

logs页面

主要介绍app.json,app的框架文件(为什么app的文件缺少一个.wxml的文件,是因为项目的框架没有默认的页面,必须要在app.json中配置首个出现并显示的页面,如下图)

app.json

用于配置项目的全局参数和框架等等,如下图中的代码

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],

}

不难看出pages中有两个页面的路径,即代表在此项目中存在两个页面“index”、“logs”。而index页面放在首个位置,即代表app启动显示的第一个页面为index页面。

如果我们项目中需要新建新的页面(test)的话,那么需要创建此页面的文件夹(test),并在文件夹(test)下面,新建四个文件“test.xml”、“test.json”、“test.js”、“test.wxss”。并将“test.xml”所在的路径,添加进app.json中的pages中


image.png

PS:大家是不是会觉得创建一个新的页面是不是很麻烦,需要创建这个文件夹,还需要在此目录下创建4个文件,最后再把文件的索引添加进pages中,那么我们是不是有简单的方法,能一步到位地解决呢

解决办法

我们跳过创建的过程,直接在app.json的pages中,添加新的页面路径,然后我们再编译项目,你会发现是如此的简单。

编译前的项目结构

编译之后 ----


编译后的项目结构

是不是很快捷地就出来了呢。没错,以后我们都可以采取此种类型的方法,注意“pages/test1/test1”,不是一定非要这么写,你也可以写成“demo/demo/demo”那么会在新的路径下创建此页面文件,我们编译下看看

编译前

编译----

编译后

路径自己来决定。


下面介绍下:
app.json中的window参数

{
  
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
 
}

具体的参数 我们可以去查看微信的api文档,这里就不做介绍了
传送门:api文档

image.png


app.wxss

app的整体框架的样式配置

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

添加如下参数的话,如果在之后的页面中,没有对指定的text标签设置字体大小的话, 那么则会显示默认的22rpx的大小

text{
  font-size: 22rpx;
}

app.js

onLaunch: function () {

项目的启动函数,项目在启动的时候,会触发此方法,有且只有一次。


项目的模板大致介绍清楚了 ,下一节我们学习:

传送门:
六:登录Login页面的实现与讲解

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,470评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,393评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,577评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,176评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,189评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,155评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,041评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,903评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,319评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,417评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,013评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2 353

推荐阅读更多精彩内容