初尝微信小程序2-基本框架

weij 发布于2019-04-23 13:33 / 2344人阅读

摘要：有的文件不是必须的，可以参考微信小程序官方文档。应用程序和页面之间的关系微信小程序允许纵向级数最高五级，后面会介绍导航组件，设置几级页面以及之间的跳转。

基本框架：

.wxml ：页面骨架

.wxss ：页面样式

.js ：页面逻辑描述一些行为

.json ：页面配置

创建一个小程序之后，app.js,app.json,app.wxss是必须的，而且名字也不能随意更改，这些是作用于APP全局的，而用户创建的一些目录，这些可以看做一个个页面，这些目录下面也包含上面所说的.wxml文件，.wxss文件，.js文件，.json文件。这些文件和目录的名字是可以随意取的。有的文件不是必须的，可以参考微信小程序官方文档。如下：

就近关系：对于一个样式来说，如果既在全局里配置了，也在某个页面配置了，那么以离页面最近的样式为准。比如在全局样式表里配置文本颜色是红色，在某个页面的样式表配置了文本颜色是黑色。那么当打开这个页面的时候，文本颜色是黑色，而不是红色。这对于.json文件也是一样。

应用程序和页面之间的关系：

微信小程序允许纵向级数最高五级，后面会介绍导航组件，设置几级页面以及之间的跳转。

代码实例：

程序目录为：

app.json：

 1 /*app.json是全局配置文件，在这里不能随意添加注释*/
 2 {
 3   "pages": [                                     
 4     "pages/welcome/welcome"   /*设置页面路径，一定要按照先后顺序来写，不然会报错。*/
 5 　　　　　　　　　　　　　　　　　　/*会自动关联以welcome开头的所有类型文件*/
 6 
 7   ],
 8 
 9   "window":{
10     "navigationBarBackgroundColor":"#b3d4db"   /*设置导航栏颜色*/
11 } }

app.wxss：

1 text{
2   font-family: MicroSoft Yahei;    /*配置全局文本字体，通用的配置放在这里*/
3 
4 }

welcome.wxml：

1 
2 <view class="container">
3     <image class="userinfo-avatar"            
4            src="/images/头像.jpeg">image> <text class="user-name"><text style="color:red">hellotext>,morningtext> 
5 　　　　　　　　　　　　　　
6         
7 　　　 
8 <view class="moto-container"> <text class="moto">开启小程序之旅text> view> view>

welcome.wxss：

 1 /*CSS要有一个整体布局的思想，把页面看做一个整体，然后对它进行样式的配置。而不是把一个页面中，每个部分独立分开排布。*/
 2 .container{                       
 3   display: flex;            /*将容器变成弹性模型*/
 4   flex-direction: column;   /*列方向排列*/
 5   align-items: center;　　　 /*居中*/
 6 }
 7 
 8 .userinfo-avatar {
 9   width: 200rpx;   /*开发建议以iphone6，750rpx：1334rpx为例设计，单位是rpx可以自适应各种移动端分辨率。*/
10   height: 200rpx;　/*设置宽，高。*/
11   margin-top: 160rpx;/*设置距离顶部的距离*/
12 }
13 
14 .user-name{
15   margin-top: 100rpx;
16   font-size: 32rpx;        /*字体大小*/
17   font-weight: bold;       /*字体加粗*/
18 
19 }
20 
21 .moto-container{
22   margin-top: 200rpx;
23   border: 1px solid #405f80;   /*外边矩形*/
24   width: 200rpx;
25   height: 80rpx;
26   border-radius: 5px;          /*圆角矩形*/
27   text-align: center;　　　　　　/*水平居中*/
28 }
29 
30 .moto{
31   font-size: 22rpx;
32   font-weight: bold;
33   line-height: 80rpx;         /*垂直居中，让文字高度等于容器高度*/
34   color: #405f80;
35 }
36 
37 page{               /*小程序自动在页面的最外层加了一层标签，我们的所有组件的标签都是写在
                       这里面的。所以，如果我们要对整个页面进行操作，需要修改page的样式。*/
　　
38   height: 100%;　　　/*整个页面的高度*/
39   background-color: #b3d4db;  /*设置整个页面的颜色，这样就算把页面向下滑动，
　　　　　　　　　　　　　　　　　　　　整个页面的背景也是这个颜色的。*/
40 
41 }

整个页面显示如图：

7.7修改：

如果出现此报错，说明在此目录下.js文件中没有对页面进行任何配置，在老版本的开发工具中不会报错，而现在会报错，必须在.js里进行页面的配置，哪怕是空配置也可以。解决如下：

输入Page出现提示之后，按回车自动会跳出配置模板，不进行任何修改也行。

保存编译之后报错消失。

云服务器 GPU云服务器微信小程序框架微信小程序微信小程序支付微信小程序部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2035.html

Antmove 缘起 - 好用的小程序多端解决方案

摘要：目前支持哪些平台的搬家目前对外开放版本释放了微信小程序转支付宝小程序的功能，这也是我们在调研中发现需求最多的。从笔者的了解来看，微信小程序框架原理更接近于，而支付宝小程序更接近于。原文地址： https://ant-move.github.io/we... 蚂蚁搬家工具（Antmove）是一个小程序开发辅助工具，致力于解决小程序跨平台开发的难题，借助于 Antmove，你只需要编写...

crelaber 2019-08-26 10:32 评论0 收藏0
微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0
小程序跨平台开发解决方案探索

摘要：继微信正式推出微信小程序后，各个大厂陆续发布了各自的小程序平台支付宝小程序百度小程序头条小程序，跨小程序平台开发也成为了众多小程序开发者要面临的问题。继微信正式推出微信小程序后，各个大厂陆续发布了各自的小程序平台 —— 支付宝小程序、百度小程序、头条小程序，跨小程序平台开发也成为了众多小程序开发者要面临的问题。 Antmove - 小程序跨平台解决方案小程序开发血泪史小程序发展初...

xiangzhihong 2019-08-26 10:30 评论0 收藏0
从0到1：微信小程序自选股项目回忆录

摘要：小程序自选股项目团队在长达五个月的时间里经历了太多不为人知的故事，不知通宵了多少个夜晚，只为等待小龙宣布号小程序正式发布的到来。第一次被微信开放平台开发二组团队小程序项目团队当小白鼠各种实验新特性。。导语：我很喜欢小龙的一句话，微信因你而变。是的，把事情做到极致的时候，这个世界就会因你而变。小程序自选股项目团队在长达五个月的时间里经历了太多不为人知的故事，不知通宵了多少个夜晚，只...

feng409 2019-08-20 13:36 评论0 收藏0
「前端开发者」如何把握住「微信小程序」这波红利？

摘要：我将上述内容进行简单的整理，来回答标题的提问前端开发者如何把握住微信小程序这波红利迅速掌握微信小程序相关技术。由于前两周一直在老家处理重要事情，虽然朋友圈被「微信小程序」刷爆了，但并没有时间深入了解。昨天回广州之后，第一件事情就是把「微信小程序」相关的文章、开发文档、设计规范全部看了一遍，基本上明白了「微信小程序」是怎么回事，我关注的公众号都很看好「微信小程序」的前景。作为一个「...

wendux 2019-08-20 11:20 评论0 收藏0