01day-微信小程序

04-开发者环境搭建（下载安装开发者工具）

01==》微信开发工具的下载  安装
微信小程序的工具是  下载稳定版本的
安装的时候 直接下一步就可以了


02==》项目名陈随便输入
目录
AppID 如果你没有 直接使用测试号
有就直接赋值注册的
他们之间的区别是   测试号是不能够发布到服务器上的

05-小程序项目介绍（项目文件介绍）
XX.js是行为
XX.json  叫做配置文件
xxx.wxml叫做结构
xxx.wxss 内饰css

app.js是入口文件 不要随便去改动它
app.json  是配置项 如顶部最初的WeChat就是在这个文件中去改  它是全局最大的配置文件
微信中所有的布局都是采用flex布局的方式


文字标签 <text></text>

在page中新建页面
首先新建目录==》在这个目录中新建page 
ps==>目录名和page名字一致
你新建的页面在app.json中它自动帮你配置


ps==》app.json中  谁放在最上面 随就会显示出来的注意顺序
如下 最后一个不能够加逗号隔开
 "pages": [
    "pages/main/main",
    "pages/index/index",
    "pages/logs/logs"

  ],

数据是在XX.js中的data中哦
<!--pages/main/main.wxml-->
<text>pages/main/main.wxml</text>
<button>{{txt}}</button>


// pages/main/main.js
  data: {
     txt:"按钮"
  },

如何你要删除某个页面，
你要到app.json去吧那个页面的配置也删除了。

06-小程序循环条件判断rpx介绍  循环  if判断


07-view组件和flex布局

view 视图容器

 width:750rpx;相当于宽度100%； rpx是一个响应式的单位



 02==》 css3主轴的对齐方式  两个div 竖直column  row排在一行
 ps==>主轴的方式 默认竖直的

  .section{
    width:750rpx;
    background: #ccc;
    display: flex;
    flex-direction:row;  /* 主轴的对齐方式  竖直column  row排在一行*/
}

有机会看一下css的对齐方式
03===》侧轴的对齐方式 配合 flex-direction:column;有效果
    align-items:center; 侧轴的对齐方式(居中)  侧轴跟竖直有关  所以有效果


08-scrollview和text

超出所设置的高度  自动隐藏起来 在开发的时候有纵向滚动条  但是在真机上是没有滚动条的  所以一个一真机开发为主
<!-- 滚动 -->
style="height: 100px;超出100px有滚动条
scroll-y纵向滚动

 <scroll-view scroll-y style="height: 100px;">
    <view    class="scroll-view-item ">1213</view>
    <view    class="scroll-view-item ">1313</view>
    <view   class="scroll-view-item ">1212</view>
    <view   class="scroll-view-item ">1212</view>
    <view    class="scroll-view-item ">1213</view>
    <view    class="scroll-view-item ">1313</view>
    <view   class="scroll-view-item ">1212</view>
    <view   class="scroll-view-item ">1212</view>
  </scroll-view>

text 属性selectable是否可以复制文字


09-表单组件
01==》按钮前面加载一个加载图标
   <button loading>点击设置以上按钮plain属性</button>

02==》  在微信红如何动态绑定属性值
  <button loading="{{lodingflg}}">点击设置以上按钮plain属性</button>
  data: { lodingflg:true}, 

被绑定的那个值 使用mastaqi花括弧,多了一个花括弧而已 

在vue中
  <button loading="true">点击设置以上按钮plain属性</button>
  data:{
    loading:true  
  }

10-导航组件
<navigator url="/pages/index/index?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>

/pages/index/index跳转的地址
 url="/pages/index/index?title=navigate" 如何传递参数
 hover-class="navigator-hover" 按压的时候颜色发生变化

11-地图组件简单用法
 <map id="map" 
      longitude="113.324520" 
      latitude="23.099994" 
      scale="14" 
      controls="{{controls}}"
        bindcontroltap="controltap" 
      markers="{{markers}}"
        bindmarkertap="markertap" 
      polyline="{{polyline}}"
        bindregionchange="regionchange" 
      show-location style="width: 100%; 
      height: 300px;">
</map>