微信小程序开发（first-day）

微信小程序开发

JSON配置

1. app.json

   1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

   2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

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

1. 工具配置 project.config.json

   1. [项目配置文件 | 微信开放文档]

2. 页面配置

    {
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "微信接口功能演示",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light"
    }

视图容器

1. match-media

 <match-media min-width="300" max-width="600">
   <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
 </match-media>
 ​
 <match-media min-height="400" orientation="landscape">
   <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
 </match-media>
 ​

1. movable-media and movable view

   1. movable-view的可移动区域。

   2. 可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动

2. root-portal

使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。

1. scroll-view

   可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

2. view

视图容器

基础内容

1. icon

   icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

2. progress

进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)

1. text

文本

测试代码

1. wxml

 <view class="box" hover-class="boxhover">
 李光勇
 <view class="inner" hover-class="innerhover" hover-stop-propagation="true">hello</view>
 </view>
 <view>
 lgy;;;lgy
 </view>
 <view>
 lllllll
 </view>
 <text user-select="true">7897897</text>
 <view></view>
 <text decode="true">&lt; kkk &gt;</text>
 <text space="nbsp">2 2 22  2222</text>
 <view>--------------------</view>
 <icon type="success"/>
 <icon type="search" size="30" color="pink"/>
 <progress
 percent="50"
 show-info="true"
 border-radius="10"
 stroke-width="12"
 ></progress>
 <view style="height: 200rpx; width: 180rpx; background-color: blue;"></view>
 <scroll-view class="myScroll" scroll-x="true">
  <view class="row">1</view>
  <view class="row">2</view>
  <view class="row">3</view>
  <view class="row">4</view>
  <view class="row">5</view>
  <view class="row">6</view>
  <view class="row">7</view>
  <view class="row">8</view>
 </scroll-view>
 <match-media min-width="100px" max-width="500px">
 <view>页面宽度在范围内显示</view>
 </match-media>
 <movable-area  style="background-color: brown; height: 400rpx; width: 400rpx; overflow: hidden;">
 <movable-view direction="all" out-of-bounds="true" inertia="true" x="10rpx" y="10rpx"  style="width: 100rpx; height: 100rpx; background-color: pink;">
 <view>lgy</view>
 </movable-view>
 </movable-area>
 <view class="out">
 <view class="box1"></view>
 <view class="box2">
 <!-- <root-portal>
   <view class="mask"></view>
 </root-portal> -->
 </view>
 </view>

1. wxss

 .box{
   height: 200px;
   width: 180px;
   background-color: aqua;
 }
 .box .inner{
   height: 100px;
   width: 100px;
   
 }
  .boxhover{
   background-color: pink;
 }
 .innerhover{
   background-color: rebeccapurple;
 }
 .myScroll{
   width: 100%;
   height: 200rpx;
   white-space: nowrap;
   background-color: sandybrown;
 }
 .myScroll .row{
   height: 200rpx;
   width: 180rpx;
   margin-right: 20rpx;
   background-color: seagreen;
   display: inline-block;
 }
 .myScroll .row:last-child{
   margin-right: 0%;
 }
 .out{
 ​
 }
 .out .box1{
   height: 400rpx;
   width: 400rpx;
   z-index: 10;
   position: relative;
   background-color: skyblue;
 }
 .out .box2{
    height: 300rpx;
    width: 300rpx;
    position: relative;
    left: 200rpx;
    top: -200rpx;
    z-index: 9;
    background-color: steelblue;
 }
 ​