微信小程序学习笔记【1】

三个部分

1 .xml~html
2 .wxss~css
3 .js

通过模版插值方式显示在页面上

.xml
 <view>
    {{message}}
  </view>
  .js
    // Page 页面对象 参数选项对象
    // 选项 data选项 数据
  Page({
  // 定义响应式数据，显示在模版页面
  data:{
    message:'helloworld',
    online:1,
    list:[
          {num:'1',word:'万里江山一望赊'},
          {num:'2',word:'天风吹落海南沙'},
          {num:'3',word:'云生古洞千年石'},
          {num:'4',word:'六代荒台有暮鸦'}
        ],
    inputValue:''  
    onConfirm(){
    console.log('wdnmd')
   //  先获取值
   console.log(this.data.online);
  //  再改变值
  // 改变值，模版界面重新渲染
   this.setData({
   online:0
   })
   //  获取输入框内容显示到列表界面 
  let inputValue = this.data.inputValue
  let list = this.data.list
  list.push({num:inputValue,word:100})
  this.setData({
    list
  })
 },
 //点击获取输入框值
 onbindInputValue(e){
   console.log('>>>>>',e.detail.value);
   let inputValue = e.detail.value
   this.setData({
   inputValue
   })
            }
                })
    

三目运算符

{{online===0?'在线':'离线'}}

条件逻辑渲染

    <view wx:if="{{online==0}}">在线</view>
    <view wx:else="{{online==1}}">隐身</view>

列表渲染 默认项item 序列号index

    <view wx:for="{{list}}" wx:key="index">
        {{index}} - {{item.num}} - {{item.word}}
    </view>

另一种写法

   <view wx:for="{{list}}" wx:for-item="user" wx:for-index="id" wx:key="id">
       {{id}} -  {{user.num}} - {{user.word}}
   </view>

按钮与点击事件

改变响应式数据online值
<button type="primary" capture-bind:tap="onConfirm">点我</button>

显示inputValue值

<view>
 {{inputValue}}
</view>

输入框

<input type="text" class="m-content-input" bind:input="onbindInputValue" value="{{inputValue}}" placeholder="请输入内容"/> 

屏幕自适应单位rpx

<view class="g-wrapper"></view>
.g-wrapper{
  /* 在iPhone6上1px=2rpx，还想显示100*100则需要换算 */
  width: 200rpx;
  height: 200rpx;
  background: green;
}

iPhone6显示效果

iPhoneX显示效果