初识微信小程序

目录：

1.项目：电影周周看

2.创建项目和目录文件结构

3.页面配置初探

4.view、text、image组件

5.快速实现基本布局

6.元素大小适配不同宽度屏幕

7.新增“每周推荐”weekly页

8.使用navigator组件

9.配置tabBar

10.配置全局的导航栏样式

----------------------------------------------------------------------------------------------------------------------------------------------------

现在最前面：本部分about部分代码，我均写在了index部分。

1.项目：电影周周看

2.创建项目和目录文件结构

App ID：开发->开发设置->App ID

进入后台->文档（右上角）->小程序开发->框架->（小程序包括一个App和多个page）

单页面小程序的目录和文件结构创建：

“+”->app.json；app.wxss；app.js->创建about目录（文件夹）（about.js;about.json;about.wxml;about.wxss）->创建pages目录（将about放入该目录下）

.json:不能是空白，至少{   }对象

错误提示：未找到入口页面

解决方法：在app.json中{  "pages":["pages/about/about"]  }------（需用相对路径）

错误提示：about.js出现脚本错误，或者未正确调用page函数调用-----（说明，about.js不能是空白）

解决方法：在about.js添加Page({})

实现单页面小程序：

方法一：在about.wxml中（在about.wxml编辑（类似于html））

方法二：在about.wxss中

在about.wxml中

 

3.页面配置初探

添加特定样式的标题：

设置：在about.json中添加代码（只有white和black两个取值）

 

4.view、text、image组件

设置：在about.wxml中添加代码

//wxml的基本构成、常见属性
//bindtap="f0" 绑定事件处函数
<text class="info" id="abc" style="" bindtap="f0" hidden="" data-user-name="user">"hello Ah"</text>

"+"->目录->Images->图片放入

<view>
  <image src="/Images/bmzx.png"></image>
  <text>电影周周看</text>
  <text>我每周推荐一部好片</text>
  <text>我的微博：</text>
</view>

样式：

 

5.快速实现基本布局

应用弹性盒子布局

要求：1.从上往下  2.相对均匀分布  3.水平居中

方法一：（传统方式）

在about.wxss中添加代码（存在问题：为什么文字不居中？）

.container{
  background-color: #eee;
  height:100vh;

  text-align: center;
  /* align-items: center; */
}
text{
  /* 实现从上往下 */
  display: block;  
}

image,text{
  margin-bottom: 60px;
}

方法二：（弹性盒子布局）

.container{ 
  background-color: #eee;
  height:100vh;

  display: flex;
  /* 主轴方向改为从上往下 */
  flex-direction: column;
  /* 在垂直方向上均匀分布 */
  justify-content: space-around;
  align-items: center;
}

 

6.元素大小适配不同宽度屏幕

响应式长度单位rpx

在about.wxml中添加代码

<view>
  <image class='about-banner' src="/Images/bmzx.png"></image>
  <text style='font-weight: bold ; font-size: 60rpx'>电影周周看</text>
  <text>我每周推荐一部好片</text>
  <text>我的微博：</text>
</view>

在about.wxss中添加代码

.about-banner{
  /* 正常宽、高为750rpx */
  width: 375rpx;
  height: 375rpx;

  /* 把图形设为圆形 */
  border-radius: 50%;
}

 

7.新增“每周推荐”weekly页

（公共样式表app.wxss）

添加weekly对应的文件->添加对应的四个基本文件（脚本文件、配置文件、视图文件、样式表文件）->下载图片（jf.jpg）

weekly.js

Page({})

weekly.json

{
  // 设置标题
  "navigationBarTitleText":"每周推荐"
  
}

weekly.wxml

<view class='container'>
<!-- container 在 index.wxss中定义 则该部分该功能不可用，放入app.wxss中定义，则为全局定义，该功能可用-->
  <text>本周推荐</text>
  <image src="/Images/jf.jpg"></image>
  <text>教父</text>
  <text>点评：最精彩的剧本，最真实的黑帮电影</text>
</view>

app.json

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

app.wxss

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

效果图：

 

 

8.使用navigator组件

到达页面方式：导航链接（navigator组件）

open-type属性；hover-class属性

在about页上加导航链接，使之指向weekly页：（点击前显示为蓝色，点击后显示为红色，后跳转）

about.wxml:

<view class='container'>
  <image class='about-banner' src="/Images/bmzx.png"></image>
  <text style='font-weight: bold ; font-size: 60rpx'>电影周周看</text>
  <view>
  <text>我</text><navigator style='display:inline;' url='/pages/weekly/weekly' open-type='navigate' hover-class='nav-hover' class='nav-default'>每周推荐</navigator><text>一部好片</text>
  <!-- 不换行：style='display:inline;'无返回原页面：open-type='redirect' -->
  </view>
  <text>我的微博：</text>
</view>

about.wxss:

.nav-default{
  color: blue;
}

.nav-hover{
  color: red;
}

结果显示：

 

9.配置tabBar

配置所需要的标签栏：

下载icon图标，放入icons文件夹->在全局配置app.json配置所需标签栏->

app.json

"tabBar":{
    "list":[
      {
        "text":"每周推荐",
        "pagePath":"pages/weekly/weekly",
        "iconPath":"images/icons/1.jpg",
        "selectedIconPath":"images/icons/4.jpg"
      },
      {
        "text":"关于",
        "pagePath":"pages/index/index",
        "iconPath":"images/icons/2.jpg",
        "selectedIconPath":"images/icons/3.jpg"
      }
    ],
    
    "color": "#000",
    "selectedColor":"#00f"
  },

about.wxml（更改部分代码）

<text>我</text><navigator style='display:inline; color:green' url='/pages/weekly/weekly' open-type='switchTab' hover-class='nav-hover' class='nav-default'>每周推荐</navigator><text>一部好片</text>

效果图：（下方）

 

10.配置全局的导航栏样式

在app.json中设置：（全局）

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

 

写在最后：

如何创建小程序、小程序图片和文字布局、新建页面、点击跳转、全局调控。。。

修改后样式：