angularjs全栈开发知乎_1-4【微信小程序全栈开发课程】原生小程序框架介绍

1、打开小程序目录

打开微信开发者工具，我们上一节新建的项目，我圈出来的这个地方就是小程序的目录结构（如果你那里没有显示，可以点击左上方的编辑器来显示）

2、原生小程序框架介绍

给大家画了一张图，重要的都在这了~

3、app.json页面配置文件介绍

参考文档，建议大家收藏一下这个小程序文档，后面我们会经常用到~ https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

咱们在微信开发者工具中点击app.json文件，先看一下文件中的代码

{"pages": ["pages/index/index","pages/logs/logs"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"}
}

（1）pages页面路径列表

pages数组中第一个元素是进入小程序的默认显示页面，在这里，默认显示页面是pages/index/index。

如果我们将pages/logs/logs放在第一个，在微信开发者工具中直接编辑，像下面代码这样，保存代码后（按ctrl+s或者command+s），小程序的默认显示页面就变成了pages/logs/logs

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

（2）window全局的默认窗口表现

window里面包含的几项分别代表的是：

backgroundTextStyle，下拉 loading 的样式
navigationBarBackgroundColor，导航栏背景颜色
navigationBarTitleText，导航栏标题文字内容
navigationBarTextStyle，导航栏标题颜色

我们来修改一下导航栏背景颜色和导航栏标题颜色，修改后的代码如下：

"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#000000","navigationBarTitleText": "WeChat","navigationBarTextStyle": "white"
}

保存代码后，模拟器里面的导航栏就变成了黑底白字。

（3）tabBar底部 tab 栏的表现

在我们创建的项目示例中，没有tabBar，需要自己添加，在代码中添加tabBar

{"pages": ["pages/index/index","pages/logs/logs"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#000000","navigationBarTitleText": "Wechat","navigationBarTextStyle": "white"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/logs/logs","text": "日志"}]}
}

保存代码后，页面中出现了底部tab栏

其他文件我们先不介绍了，因为后面我们会用mpvue框架，不会直接操作这些文件，我们先了解一下每个文件的功能就可以了~

作者：猫宁一 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！可关注【猫宁一】公众号领取我所有全栈项目代码哦~点击查看课程目录：微信小程序全栈开发课程目录

angularjs全栈开发知乎_1-4【微信小程序全栈开发课程】原生小程序框架介绍相关推荐

卷积层和全连接层的区别_1*1的卷积核和全连接层有什么异同？
简单回答一下: 1.数学本质上一样,都是特征图中的元素乘以权重再求和.全连接是把特征图拆开组成一个一维向量,再乘以一个权重向量,这两个向量中的元素一一对应所以输出结果是一个值.而1*1卷积,我们知道卷 ...
通达OA二次开发对通达2015版微信查询用户信息模块升级开发（图文）
OA提供对微信的支持这一点做的非常好,用户使用起来也更方便了. 而其中的个别功能还有待完善,比如今天要说的这个微信查询用户信息模块.升级前的使用方法:输入@+用户中文名,并且要求完全匹配,然而在实际使 ...
微信 SHA1 签名_微信公众号自动回复功能开发
微信公众号自动回复功能开发本篇主要讲解微信公众号自动回复功能开发,让我们自己去托管公众号回复的功能,这样可以更加灵活的根据公众号收到的信息来制定特定的回复信息,一起来了解吧! 1.注册公众号如果 ...
微信表情图像代表什么意思_2017微信表情意思全解图片含义
原标题:2017微信表情意思全解图片含义最新消息,小编记者发现 2017微信表情意思全解图片,想知道2017微信表情意思全解的意思.有没有2017微信表情意思全解大全呢?你想要的微信表情意思全解图片 ...
angularjs全栈开发知乎_为什么你要去尝试全栈开发？
程序员看到"全栈"这个概念,大概会有两种反应 1. 卧槽,这个好,碉堡了 2. 你懂毛,全栈就是样样稀松以上两种反应其实都有失偏颇.因为即使只学一门技术,水平很菜的人也多的是,而 ...
活久见！月薪30k的小程序全栈开发到底有多难？
10年前,公司的标配是门户网站,造就了一批网站工作室.随着移动互联网大潮兴起,App又成了企业标配,IOS和Android开发赚的盆满钵满.然而App导致的手机内存告急,无止尽的信息推送,让微信小程序 ...
为啥我的页面模板的from提交不了数据_4-9【微信小程序全栈开发课程】意见反馈（四）--提交反馈信息
1.创建后端操作文件先在后端server/controllers文件夹中创建操作文件createopinion.js,用来将从前端页面提交的数据,插入到opinions表中,创建完之后,页面目录如下 ...
上拉加载更多后台数据_6-7【微信小程序全栈开发课程】记录页面（七）--分页加载记录数据...
现在是一次性加载所有的记录数据,数据多的时候,会加载比较慢,所以我们改成分页加载,一次最多加载15条数据每次拉倒底部都会自动加载下一页的数据,知道所有的数据加载完成 1.添加data变量编辑rec ...
eslint不报错 vue_2-2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误
1.修改入口文件也就是src/pages/index/main.js文件 main.js是入口文件,通过main.js来加载index.vue文件.每个页面文件夹中都要有main.js文件 //加载 ...