小程序知识点

 1、标签使用（参考微信开发者工具链接中的使用指南：微信开放文档）

        页面链接：navigator

                小程序跳转分两种：

  普通页面：

<navigator url="/pages/submit/submit"></navigator>

  tab栏页面：（加上open-type跳转方式）

<navigator url="/pages/submit/submit" open-type="switchTab"></navigator>

        视图容器：view（相当于div）

<view></view>

        文本：text（小程序开发中没有p标签和span标签）

<text></text>

2、小程序中的js

• 例1： 修改样式

<view>{{msg}}</view>
<view>{{userName}}</view>
<button bindtap="changeName">修改样式</button>

Page({

  data: {
    msg: 'hello world',
    userName: '张三'
    },

  changeName(){
    this.setData({
      userName: '李四'
    });
  }
})

• 例2：登录退出切换 

<view wx:if="{{islogin}}">
  <text>13800000000</text>
  <button>退出登录</button>
</view>
<view wx:else>
  <input type="text" placeholder="请输入手机号码"/>
  <button bindtap="login">登录</button>
</view>

Page({

  data: {
      islogin: false
    },

  login(){
    this.setData({
      islogin: true
    })
  }
})

• 例3：显示和隐藏 if~else

<button bindtap="change">操作</button>
<view wx:if="{{show}}">hhhhhhhhhhhhhhh</view>

Page({

  data: {
      show: true
    },

  change(){
    this.setData({
      //取反
      show: !this.data.show
    })
  }
})

•  例4：拿到列表 for

<view wx:for="{{list}}">
  <text>{{item.name}}</text>
  <text>{{item.age}}</text>
</view>

Page({

  data: {
      list:[
      {
        name: '张三',
        age: 15
      },
      {
        name: '李四',
        age: 17
      },
      {
        name: '王五',
        age: 18
      },
      {
        name: '赵六',
        age: 19
      }
    ]
   }

})

•  例5：获取后台数据

<view wx:for="{{list1}}">
<image src="{{item.imageUrl}}"></image>
<text>{{item.name}}</text>
</view>

Page({

  data: {
      list1:[]
    },

  onLoad(){
    this.getList();
  },
  //获取后台数据
  getList(){
    //请求数据
    wx.request({
      //后台数据接口地址
      url: 'http://81.71.65.4:3006/destination/list', 
      //res是存放数据的
      success:(res)=> {
        console.log(res.data.result);
        this.setData({
          list1: res.data.result
        })
      }
    })
  }
})

例6：单击实现在篮球、羽毛球以及乒乓球之间来回切换

<view class="list flex jc-sa bg-fff aic">
  <text bindtap="handTap" data-num="1" class="{{num==1?'active':''}}">篮球</text>
  <text bindtap="handTap" data-num="2" class="{{num==2?'active':''}}">羽毛球</text>
  <text bindtap="handTap" data-num="3" class="{{num==3?'active':''}}">乒乓球</text>
</view>

Page({
  data: {
    num: 1
  },
  handTap(event){
    // console.log(event.target.dataset.num);
    var newNum = event.target.dataset.num;
    this.setData({
      num: newNum
    })
  }
})

• 请求参数的两种方式：1、把参数拼接到url后面；2、把参数放入到data对象里

// 方式一: 把参数拼接到url的后面
wx.request({
    url: 'http://81.71.65.4:3006/discover/list?kind=01&currPage=1&pageSize=7'
})
​
// 方式二: 把参数放入data对象里
wx.request({
    url: 'http://81.71.65.4:3006/discover/list',
    data: {
        kind:01,
        currPage:1,
        pageSize:7
    }
})

•  存数据和取数据

Page({  
  onLoad() {
    wx.setStorageSync('username', '张三')
  }, 
})

var aa = wx.getStorageSync('username');
console.log(aa);

• onLoad和onShow

1. onLoad页面加载完毕就会自动运行, 只会运行一次, 除非重新刷新页面
2. onShow页面只要展示就会自动运行