day1.微信小程序基本要点

1. 小程序的结构目录

   声明：系统的文档介绍请参考官方文档，此处只做简单的重点梳理，微信小程序官方文档

2. 小程序配置文件

   • [全局配置文件app.json](小程序代码构成 | 微信开放文档 (qq.com))

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

   • 页面配置page.json

   • sitemap.json

     其他配置项细节可以参考文档 小程序的配置 。

3. 模板语法

   1. wxml标签:

      • text = span view = div

      • block：

        1. 相当于占位符作用的标签
        2. 只有当写代码的时候，可以看到这标签的存在
        3. 页面渲染的时候，小程序会将其移除

   2. 数据绑定：{{}}

      注意：字符串和大括号之间一定不要有空格

   3. 数据运算（字符串拼接、数字运算、逻辑运算）：

   4. 列表渲染：

      wx:for="{{数组或对象}"

      wx:for-item=“item”–循环的每一项

      wx:for-index=“循环项的索引”

      wx:key=“唯一的值，也就是关键字”

      1. wx:key 绑定一个普通字符串的时候，那么这个字符串肯定是循环数组中的对象的位移属性，也就是关键字

      2. wx:key = “*this”:表示你的数组是一个普通的数组， *this表示的是循环项。eg:[1,2,3,4,5]

      3. 当出现嵌套循坏的时候，尤其要注意 以下的名称不要重名：

         wx:for-item=“item” wx:for-index=“index”

      4. 默认情况下我们不写wx:for-item=“item” wx:for-index=“index”，小程序会补充上，同时其循环项和循环名称分别为item和index

         因此，只有一次层循环的话，wx:for-item=“item” wx:for-index="index"可以省略，列如对象循环：

         <view wx:for="{{对象}}" wx:for-item="对象值" wx:key="{{对象的唯一属性}}" wx:for-index="对象属性">
         </view>
         

         注意:当循环对象的时候，最好改一下：

         <view wx:for="{{person}}" wx:for-item="value" wx:key="" wx:for-index="key">
         	{{key}}:{{value}}
         </view>
         

   5. 条件渲染

      • wx;if

        1. wx:if=“true/false”

        2. <view wx:if="{{false}}">1</view>
           <view wx:elif="{{false}}">2</view>
           <view wx:else="{{true}}">3</view>
           

      • hidden

        <view hidden>hidden1</view>
        <view hidden="{{true}}">hidden2</view>
        

        注：频繁使用用hidden(是通过样式的方式隐藏的display:none。因此，不能跟display:none一起使用)/非频繁使用wx:if（结构上去掉，可以理解为dom tree上直接去掉结点）

   6. 事件绑定

      标签	关键字名称	通常步骤
      input	bindinput="{{}}"	1.通过 ，<input bindinput="{{函数名}}""/>2.通过事件源对象e.detail.value获取输入框的的值3.this.setData({操作变量})
      点击事件	bindtap="{{}}"	注意需要加入一个点击事件的时候：1.是无法在小程序中直接传参；2.需要通过自定义属于data-XXX="{{}}"的方式传参；3.最后在时间源中获取自定义属性；

4. wxss样式

   1. rpx：

      小程序中所有屏幕宽度默认为750rpx,因此不同设备屏幕宽度对应的实际长度就不同。列如，在宽度750px的iphone6，在实际的显示中1px=1rpx.而在宽度为375pxiphone5中，1px=2rpx。因此，在实际看的设计稿时：

      假设：设计稿的宽度为width px,

      ​ 则实际显示效果为：width px = 750rpx

      因此，转换公式为：1px = 750/width rpx，100px = 750/width*100 rpx

      故具体写法应该是：

      width:calc(750rpx*100/设计稿宽度);
      

      注：750和rpx中间不要用空格，运算符两边也不要有空格！！！

   2. 样式导入

      wxss中直接支持样式导入功能，也可以和less混用。

      使用@import语句引入外联样式表，只支持相对路径

      /* pages/demo/demo.wxss */
      @import "../../styles/demo.wxss";
      

   3. 选择器：

      小程序中不支持通配符*选择器，其他都支持。因此下列初始化代码无效：

      *{
      margin：0；
      padding：0；
      box-sizing:border-box;
      }
      

   4. 小程序中的less

      原生的小程序不支持less的，其他基于小程序的框架都支持。但仅仅为了一个less功能而引入一个框架是不可取的，可以这样做：

      1. 打开vscode

      2. 安装插件Easy LESS

      3. 打开设置，点击设置文档，在后面添加如下代码：

         "less.compile": {
                 "outExt": ".wxss"
             }
         

      4. 最后，在要编写样式文件的位置，新建.less文件，保存后就会生成对应的wxss文件。

      5. less简单使用案列

         //1.新建demo.less
         
         //2. 导入外部less文件
         @import "test.less";
         // 外部文件内容
         // @themeColor:green;
         // @fontSize:18px;
         
         
         // 3.定义变量
         @num:30;
         @Color:red;
         // 4.使用
         view{
             width: @num;
             height: @num;
             background-color: @Color;
         }
         .view {
             text{
             width: 20px;
             height: 20px;
             background-color: @themeColor;
             }
         }
         

         生成的wxss

         view {
           width: 30;
           height: 30;
           background-color: red;
         }
         .view text {
           width: 20px;
           height: 20px;
           background-color: green;
         }
         

5. 常用组件

   1.img:

   image组件存在默认的宽度和高度 320px*240px

   1. src指定加载图片的路径，

   2. mode决定图片宽高如何适配：

      mode属性	效果	使用频率
      scaleToFill	默认值不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image元素
      aspectFit	保持宽高比确保图片的长边显示出来页面轮播图	常用
      aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来	少用
      widthFix	以前web的图片的 宽度指定了之后高度会自己按比例来调整	常用
      bottom…等	类似WEB的backgroud-position

   3. 小程序中的图片标签直接就支持懒加载：lazy-load(会自己判断当图片出现在视口的上下三屏的高度的时候，自己开始加载图片)

   2.swiper

   1. 轮播图的外层容器swiper,轮播项swiper-item

   2. swiper标签存在默认样式: width:100%,heigth:150px

      image存在默认样式：width:320px height:240px

      由于swiper无法被内容所撑开，所以应该：根据原图的高度和宽度等比列的给swiper定宽高：

      swiper 宽度 / swiper 高度 = 原图高度 / 原图宽度

      ==> swiper高度 =swiper 宽度*原图宽度 /原图高度

      ==> height:calc(100vw*原图宽度/原图高度)

      注:vw/vh是根据网页视口高度所定义的长度单位

      window.innerHeight == 100vh

      window.innerWidth == 100vw

   3.rich-text:

   将字符串解析成对应的标签，类似于Vue中的v-html的功能，后面标签字符串或对象数组

   4.button的开放能力：

   opentype:

   属性	使用方法
   contact	更多操作直接打开客服对话功能需要在微信小程序的后台配置
   share	转发当前的小程序到微信朋友中，不能把小程序分享到朋友圈
   getPhoneMumber	获取当前用户的手机号码信息结合一个事件来使用不是企业的小程序账号没有权限来获取用户的手机号码； 1绑定一个事件bindgetphonenumber 2在事件的回调函数中通过参数来获取信息 3获取到的信息已经加密过了，需要用户自己待见小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序中 就可以看到信息了
   getUserInfo	获取当前用户的个人信息 1使用方法类似获取用户的手机号码2可以直接获取不存在加密的字段
   launchApp	在小程序当中直接打开app 1需要现在app中 通过app的某个链接打开小程序 2在小程序中再通过这个功能重新打开app eg:找到京东的app和京东的小程序
   opensetting	打开小程序内置的授权页面 1授权页面中只会出现用户曾经点击过的权限
   feedback	打开小程序内置的意见反馈页面，只能够通过真机调试

   open-type 的contact的实现流程：
   1.将小程序的appid由测试号改为自己的 appid

   2.登录微信小程序官网，添加客服–微信、

   5.ridio\checkbox:

   搭配radio-group\checkbox-group一起使用 ：

   <radio-group bindchange="radioChange">
       <radio  color="red" value="male">
           男
       </radio>
       <radio color="blue" value="female">
           女
       </radio>
   </radio-group>
   <text  selectable="false" space="false" decode="false">
       您选中的是:{{gender}}
   </text>
o-group bindchange="radioChange">
       <radio  color="red" value="male">
           男
       </radio>
       <radio color="blue" value="female">
           女
       </radio>
   </radio-group>
   <text  selectable="false" space="false" decode="false">
       您选中的是:{{gender}}
   </text>