toast 和android的toast一样，这里默认1500ms自动消失，也可以调用hiden消失

默认的icon是success也就是一个对号，设置为none就只显示文字了。

        wx.showToast({          title: 'login success',
          icon:'none'
          duration:1000
        })

loading  显示一个loading，需要手动调用hidden消失

wx.showLoading({  title: '加载中',
})

setTimeout(function(){
  wx.hideLoading()
},2000)

modal确认对话款

 wx.showModal({      title: 'title',      content: 'content',      success: res => {        if (res.confirm) {
          wx.showToast({            title: 'click ok',
          })
        }else if(res.cancel){
          wx.showToast({            title: 'click cancel',
          })
        }
      }
    })

image.png

actionsheet 列表选择器

代码,如果列表数据要动态的，那这里引用一个变量即可，你去修改变量这里自然也就变了。

        wx.showActionSheet({          itemList: ['老大', '老二', '老三'],          itemColor:"blue",          success:function(res){
            wx.showToast({              title: ''+res.tapIndex,              icon:'none'
            })
          },          fail:function(res){
             wx.showToast({               title: 'cancel',               icon:'loading'
             }) 
          }
        })

效果图如下

image.png

大致瞅下demo的代码

首先看下目录结构

image.png

从android开发者的角度来分析
每一个js文件就相当于一个activity，当然了不太准，里边需要一个Page的东西的。
每一个js如果是一个页面的话，那么就需要注册才能用，android是在manifest.xml里注册，那么小程序是在哪里？
在app.json里，如下图,pages标签下的都是。另外window属性应该是设置的页面默认的属性，当然了是设置标题的主要

{  "pages":[    "pages/index/index",    "pages/logs/logs",    "pages/learn/learn"
  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "icanseno",    "navigationBarTextStyle":"black"
  }
}

app.js  看起来很像我们的application。

.wxml 文件，感觉就像我们android里的布局文件
.wxss文件，很像是样式文件，对控件的属性进行设置。比如设置宽高，位置，边距等等
.json文件，很像我们manifest下每个activity下的配置文件，比如 label，theme那些。

页面跳转

url 后边跟着跳转页面的路径，2个点自然是上一级了

 wx.navigateTo({      url: '../learn/learn',
    })

设置点击事件

bindtap 就是设置点击事件的，后边起个名字。class就是一个样式的名字，样式在wxss里写

<button bindtap='bindLoginTap' class='button-login'>login</button>

  //设置登陆点击事件
bindLoginTap:function(){
//随便干点啥
}

仿照已有的两个页面写一个简单页面

image.png

learn.wxml文件如下,弄了2个输入框，一个按钮

<view class='container'><view class='login-edit'><input class='input-phone'></input><input class='input-password'></input><button bindtap='bindLoginTap' class='button-login'>login</button></view></view>

learn.wxss文件如下
还没学规则，就仿着写，看他用的点加class名字，我也这样写。
不过这里碰到问题了，不知道距离这种单位咋区分的，我看demo里是rpx，可px又啥啥，

.login-edit{
  display: flex;
  flex-direction:column;
  margin: 40rpx;
}

.input-phone{
background: red;
height: 50rpx;

}

.input-password{
  background: blue;
  height: 60rpx;
  margin-top: 20px;//这里20px看上去和60rpx差不多，不知道单位咋算的，先放着}

.button-login{
  margin-top: 50px;
  padding-left: 100px;
  padding-right: 100px;
}

本来计划

https://developers.weixin.qq.com/miniprogram/dev/api/ui.html#wxsettopbartextobject
本来打算先学这些方法的，不过想想界面咋弄都还不会，还是先去学咋画界面吧

先学这个

https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#JSON-%E9%85%8D%E7%BD%AE

{{ }} 这样的表达式

这个和占位符差不多，里边有个变量，这个变量改变以后这里对应的值也就发生变化了，如果学过databinding的话估计好理解一些。
如下

//wxml文件里有如下的文本<text class='login-text'>{{logintip}}</text>//js里，初始化的时候赋值为login
 /**
   * 页面的初始数据
   */
  data: {
    logintip:'login'
  },//比如点击登录按钮我们改变这个字段，可以看到我们修改了logintip的值以后，文本显示的内容自动就修改了
  //处理登陆点击事件bindLoginTap:function(){
this.setData({
  logintip:'点击登录了'})
},

this的使用

上边的this没啥问题，可以找到setData方法，可如果我们再套一层，如下

  onPullDownRefresh: function () {    this.setData({      logintip: '登录'
    })
    setTimeout(function(){     
     //在这里用this.setData就不行了，这个this已经不是我们要的那个this拉
      
    },2222)
  },

有两种方法，
第一种，用个临时变量保存下这个this

  onPullDownRefresh: function () {     var temp=this;//赋值给一个临时变量
    setTimeout(function(){
      temp.setData({        logintip: '登录'
      })
      wx.stopPullDownRefresh()
      
    },2222)
  },

第二种,就像lamda表达式吧

  onPullDownRefresh: function(){   //这里修改下，function（参数）改成参数=》这种，因为没有参数，所以用any代替
    setTimeout(any=>{      this.setData({        logintip: '登录'
      })
      wx.stopPullDownRefresh()
      
    },2222)
  },

页面下json数据的设置

好像不支持双斜杠注释，编译的时候会一直提示挂了。。

{  "navigationBarTitleText": "第一个练习界面",//导航栏标题文字内容
  "navigationBarBackgroundColor": "#ff0000",//导航栏标题颜色，仅支持 black/white
  "navigationBarTextStyle": "white",//导航栏背景颜色
  "enablePullDownRefresh": true,//是否开启下拉刷新
  "backgroundColor": "#ffffff",//窗口的背景色
  "backgroundTextStyle": "dark",//下拉 loading 的样式，仅支持 dark/light
  "onReachBottomDistance":20,//页面上拉触底事件触发时距页面底部距离，单位为px
  "disableScroll":true //设置为 true 则页面整体不能上下滚动；只在 page.json 中有效}//最后两个属性没有提示，比较坑，还得手动写。 另外上边是目前所有的页面的配置属性了，单独页面只能配置window属性用来覆盖app.json下的window属性

app.json的

完整的如下,tabbar不是必须的，还有坑。

{  "pages":[    "pages/index/index",    "pages/logs/logs",    "pages/learn/learn",    "pages/justtest/test"
  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "icanseno",    "navigationBarTextStyle":"black"
  },  "networkTimeout": {    "request": 20000,    "connectSocket": 20000,    "uploadFile": 20000,    "downloadFile": 20000
  },  "debug": true,"tabBar": {"color": "#000000",    "selectedColor":"#ff0000",    "backgroundColor":"#ffffff",    "borderStyle":"black",    "position":"bottom",  "list": [
    {      "pagePath": "pages/index/index",      "text": "test",      "iconPath": "res/all.png",      "selectedIconPath": "res/all_select.png"
    },
    {      "pagePath": "pages/learn/learn",      "text": "first",      "iconPath": "res/set.png",      "selectedIconPath": "res/set_select.png"
    }
  ]
}

}

image.png

我看这里有个tabbar，我也加上了，完事发现这东西也不显示啊。而且咋显示啊，然后就想到了，小程序的第一个页面是在哪里设置的？
就是pages列表下的第一个，谁放到第一个谁就是启动页。
那么问题来了tabbar咋办？tabbar要显示成启动页，那么它的list下的第一个pagepath就必须和pages列表下的第一个一样。

而且发现，tabbar里的这些页面，无法在通过其他地方进入了。比如上边的，我把learn也放到了tabbar，
其他地方我有个按钮点击也跳到learn页面，如下，结果没反应，刚学，也不知道对不对，先这样吧
wx.navigateTo({
url: '../learn/learn',
})

image 以及循环添加控件

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

默认数组的当前项的下标变量名为 index，数组当前项的变量名默认为 item
如果想改名字，可以这样写wx:for-item="itemData" wx:for-index="i"
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

  <view>
    <text wx:if="{{isWaiting}}">等待加载数据..</text>
    <block wx:else>
      <image mode='aspectFit' style='width:100px; height:100px;background-color: #ff0000;' src='../../res/all.png'></image>
      <view wx:for="{{array}}" wx:for-item="itemData" wx:for-index="i">
        <view>{{itemData.index}}</view>
        <button>{{itemData.name}}</button>
      </view>
    </block>
  </view>

学习下wx:if  wx:else 的用法
{{}}占位符，在标签里边一般得加个双引号的。
wx:for= 后边跟个数组，wx:for-item= 后边给循环的数据起个别名，后边用到
{{itemData.index}}就是根据上边的item的名字来获取数据的
我们在js的data数据里添加如下的数组

    array:[{
          index:0,
          name:'大哥'
    },
      {
        index: 1,
        name: '二哥'
      },
      {
        index: 2,
        name: '三哥'
      }
    ]

wx: 这玩意也不提示，用起来不爽

checkbox

默认是选中状态，"{{false}}" 这种有效，直接弄个单引号false是无效的。

<checkbox checked="{{false}}">{{"checkbox"+number}}</checkbox>

<button  type="{{ck?'warn':'default'}}"
代码里动态修改ck的值，可以改变button的type。

动态改变数组里的数据

从这里看到的https://blog.csdn.net/JaRiS_jade/article/details/79269233

  data: {    array:[{
          index:0,
          name:'大哥',
          check:false
    },
      {        index: 1,
        name: '二哥',
        check: false
      }
    ]
  }

点击按钮修改
双引号括起来代表变量，0是数组索引，这里修改的是第一个。

btnclick0: function (res) {    this.setData({      "array[0].check" : true
    })
  }

第二种写法,用一个变量保存，不过使用的时候变量要加个中括号代表是变量

  btnclick0: function (res) {    var hello = "array[0].check"
    this.setData({
      [hello]:true
    })
  }

数组列表设置点击事件

注意data-any (any任意类型) 方法，我们这里注入了一个id等于数据的index索引。
下边弄了2个 data-id 和 data-check

<view bindtap="arrayclick" wx:for="{{array}}" wx:key="index" >
        <view>{{item.index}} {{index}}</view>
        <button  type="{{item.check?'warn':'default'}}" data-id="{{index}}" data-check="{{item.check}}" bindtap='itemclick'>{{item.name}}</button>
      </view>

把点击事件写到外层也是可以的，如下

 <view  wx:for="{{array}}" wx:key="index"  data-id="{{index}}" data-check="{{item.check}}" bindtap='itemclick'>
        <view>{{item.index}} {{index}}</view>
        <button  type="{{item.check?'warn':'default'}}" >{{item.name}}</button>
      </view>

js里这样写

//res.currentTarget.dataset保存所有的data-的数据
  itemclick:function(res){    var id=res.currentTarget.dataset.id    var ck = res.currentTarget.dataset.check   
    var temp = "array[" + id + "].check"
    // var state=this.data.array[id].check
    // console.log("change============="+!state)
    this.setData({
      [temp]:!ck
    })
  }

单选设置

原理就是在js里定义一个clickindex的变量保存当前选中的item的index，完事代码如下
我这里比较简单，就修改type， 按钮默认就是灰色的，warn是红色的，注意 ‘warn’单引号，其他效果的话逻辑是一样的。

  <view class="single_choice_views">
    <view bindtap="singleclick" wx:for="{{array2}}" wx:key="index" data-id="{{index}}">
      <button type="{{item.index==clickindex?'warn':'default'}}">{{item.name}}</button>
    </view>
  </view>

js代码

 data: {    clickindex:0,
//省略其他 ，点击按钮以后修改clickindex为点击的按钮的index即可。
  singleclick:function(res){
    var id=res.currentTarget.dataset.id
    this.setData({
      clickindex:id
    })
  }

作者：有点健忘
链接：https://www.jianshu.com/p/977887c80668