微信小程序开发——基础目录、欢迎页面的创建（电影小程序）

系统管理员 2022-06-10 05:38 306阅读 0赞

[微信小程序开发][Link 1]——基础目录、欢迎页面的创建（电影小程序）的开发教程：

## 0、效果图展示： ##

![这里写图片描述][11094624_fd6M.jpg]  
![这里写图片描述][11094624_XOg2.jpg]  
![这里写图片描述][11094625_4FNR.jpg]

## 1、目录结构讲解： ##

![这里写图片描述][11094625_9LHH.jpg]

[微信][Link 2][小程序][Link 3]有四种文件类型：

1.  \*.wxml
2.  \*.wxss
3.  \*.js
4.  \*.json

> wxml：类似网页里的html页面；  
> wxss：类似于网页里的css样式；  
> [js][]：js文件，用来定义函数方法等；  
> json：配置页面属性，例如标题栏；

上图中的app.js app.json app.wxss 三个文件的文件名是固定的，微信官方定义好的，不可以修改文件名，也不可缺少这三个文件。

## 2、注意事项： ##

页面文件夹里的wxml、 wxss、 js、 json文件的文件名必须相同，文件夹名字不必和里面的文件名相同，如图  
![这里写图片描述][11094625_6Djj.jpg]

微信开发者者工具下载地址：[官方下载地址][Link 4]

先看下最后的效果图：  
![这里写图片描述][11094625_UZgD.jpg]

首先打开开发工具，创建quick start项目，简单的修改一下。  
![这里写图片描述][11094625_odaf.jpg]

*  把Index文件夹重命名为welcome；
 *  底部的hello world改为一个类似于按钮的样式；
 *  添加背景颜色； 修改顶部样式；

## 按钮的实现： ##

welcome.wxml

<view class="usermotto">
        <text class="btn">开启小程序之旅</text>
      </view>

welcome.wxss

.usermotto {
      margin-top: 200px;
      border: 1px solid #405f80;
      width: 200rpx;
      height: 80rpx;
      text-align: center;
      border-radius: 5px;
    }
    .btn{
      font-size: 22rpx;
      font-family: MicroSoft Yahei;
      font-weight: bold;
      line-height: 80rpx;
    }

## 背景颜色的设置： ##

注意：在最外部的view设置宽高百分百，添加背景颜色是无效的。因为[微信][Link 2]默认外面还有一层page。  
![这里写图片描述][11094625_Cqfn.jpg]  
所以需要这样写：

page{
      height: 100%;
      background: #b3d4db;
    }

## 顶部设置： ##

app.jason

{
      "pages":[
        "pages/welcome/welcome"
    
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#b3d4db",
        "navigationBarTitleText": "欢迎",
        "navigationBarTextStyle":"black"
      }
    }

[Link 1]: http://9.cn/
[11094624_fd6M.jpg]: https://static.oschina.net/uploads/img/201708/11094624_fd6M.jpg
[11094624_XOg2.jpg]: https://static.oschina.net/uploads/img/201708/11094624_XOg2.jpg
[11094625_4FNR.jpg]: https://static.oschina.net/uploads/img/201708/11094625_4FNR.jpg
[11094625_9LHH.jpg]: https://static.oschina.net/uploads/img/201708/11094625_9LHH.jpg
[Link 2]: http://lib.csdn.net/base/wechat
[Link 3]: http://www.wxapp-union.com/
[js]: http://lib.csdn.net/base/javascript
[11094625_6Djj.jpg]: https://static.oschina.net/uploads/img/201708/11094625_6Djj.jpg
[Link 4]: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161222
[11094625_UZgD.jpg]: https://static.oschina.net/uploads/img/201708/11094625_UZgD.jpg
[11094625_odaf.jpg]: https://static.oschina.net/uploads/img/201708/11094625_odaf.jpg
[11094625_Cqfn.jpg]: https://static.oschina.net/uploads/img/201708/11094625_Cqfn.jpg