美文网首页
小程序开发基础学习一

小程序开发基础学习一

作者: 玉思盈蝶 | 来源:发表于2020-04-19 18:49 被阅读0次

    1、全局配置文件修改文字颜色:

    appJSON["window"]["navigationBarTextStyle"] 字段需为 black 或 white

    image.png

    2、下拉刷新块的背景颜色:

    "backgroundColor": "yellow" 
    
    image.png

    3、tabbar的文字颜色只能使用十六进制:

    image.png

    4、数据绑定:

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        "msg": "sisi demo",
        "num" : 100000,
        "isGirl": false,
        person: {
          "age": 27,
          "height": 100,
          "weight": 100,
          "name": "思思"
        }
      },
    
    <!--pages/demo01/demo01.wxml-->
    <!-- <text>pages/demo01/demo01.wxml</text> -->
    <view>{{msg}}</view>
    <view>{{num}}</view>
    <view>{{isGirl}}</view>
    <view>{{person.age}}</view>
    <view>{{person.height}}</view>
    <view>{{person.weighr}}</view>
    <view>{{person.name}}</view>
    <view data-num="{{num}}">自定义属性</view>
    <view>
      <checkbox checked="{{true}}"></checkbox>
    </view>
    

    注意:字符串和花括号之间不要存在空格,否则导致识别失败。

    5、运算:

    <!-- 运算符 -->
    <view>{{1+1}}</view>
    <view>{{'1'+'1'}}</view>
    <view>{{10%2 == 0 ? '偶数' : '奇数'}}</view>
    

    6、循环:

    <!-- 列表循环 -->
    <view>
      <view 
      wx:key="id"
      wx:for="{{list}}"
      wx:for-item="item"
      wx:for-index="index">
        索引:{{index}},
        值:{{item.name}}
      </view>
    </view>
    
    <!-- 对象循环 -->
    <view>
      <view 
      wx:key="age"
      wx:for="{{person}}"
      wx:for-item="value"
      wx:for-index="key">
        属性:{{key}},
        值:{{value}}
      </view>
    </view>
    

    7、block标签:

    占位符的标签;
    写代码的时候,可以看到标签的存在;
    页面渲染,小程序会把他移除掉;

    <!-- block -->
    <view>
      <block>
      class="my_list"
      wx:key="id"
      wx:for="{{list}}"
      wx:for-item="item"
      wx:for-index="index">
        索引:{{index}},
        值:{{item.name}}
      </block> 
    </view>
    
    image.png

    PS:持续记录哈~~

    相关文章

      网友评论

          本文标题:小程序开发基础学习一

          本文链接:https://www.haomeiwen.com/subject/uujbbhtx.html