微信小程序

微信小程序

view 这个标签相当于div(它的特点就是在没有其他样式影响的情况下，宽度100%)；
text 这个标签相当于span(它的特点就是在没有其他样式影响的情况下，不会独占一行，宽和高由内容撑开，这个时候你设置宽高是没有用的)；
image 这个标签比较重要，图片组件。src里面可以放网络地址和本地图片地址。
button 这个是按钮组件。
input 这个是输入框组件。
navigator 这个是导航组件。

模板语法：

 <view wx:for="{{list}}" wx:key='index'  class="box">

1、wx:for="{{list}}" ------循环的数据
2、wx:key=‘index’ ------提高渲染的效率
展示：{{item}}
展示：{{index}}
wx:for-item=“value” ----重新定义每一项 替换 item
展示：{{value}}
wx:for-index="key 重新定义key index 换成 key
展示：{{key }}
3、事件绑定:
bindtap —普通的绑定事件
bindinput —input框绑定事件
语句的使用：
1、if语句的使用
：hidde 节点css样式的隐藏

<view wx:if="{{false}}">注册</view>
<view wx:elif='{{true}}'>登陆</view>
<view wx:else>最后</view>

 2、 dom 节点的创建 和删除

<view hidden='{{true}}'>喜欢</view>

 3、三元运算符

<view>{{'2'==2?"对":"错"}}</view>

 4、计算属性

<view>{{100+200}}</view>

 5、或与非

<view>{{1||0}}</view>

 6、改变数据  

<view>{{str}}</view>
<button bindtap="change">按钮</button>

js部分：

change() {
console.log(“我被点击了”);
// this.str=‘6666’// 不可以修改data值
this.setData({
//修改数据
str: “666”,
});
},

7、input 框事件

<input type="text" bindinput="fn" class="txt"/>
<button>添加</button>

 js部分：   
   fn(e) {
      事件源对象  e 
    console.log(e);
    this.setData({  //保存数据 给name  属性值
        num: e.detail.value,
    });
},

navigator组件

<!-- 
   
    url ： 当前小程序跳转的页面地址(这个路径我建议是写成绝对路径)
    open-type ：  跳转方式有下面的值
        open-type=navigate  : 保留当前页面，跳转到页面内页面（除了tabbar页面，即配置的菜单页面）
        open-type=redirect  : 关闭当前页面，跳转到页面内页面（除了tabbar页面，即配置的菜单页面）
        open-type=switchTab  : 关闭所有非tabar页面，跳转到tabbar页面
        open-type=reLaunch  : 关闭所有页面，跳转到tabbar页面
        open-type=navigateBack  : 页面回退（和delta属性一起使用，设置返回层数）
    提示：这里只是简单介绍一下，tabbar页面配置还没讲过，先了解这个东西吧，我一般都不用这个组件，习惯用小程序api
   -->
  <navigator open-type='navigate' url='/pages/index/index'>跳转</navigator>
  <navigator open-type='redirect' url='/pages/index/index'>跳转</navigator>
  <navigator open-type='switchTab' url='/pages/index/index'>跳转</navigator>
  <navigator open-type='reLaunch' url='/pages/index/index'>跳转</navigator>
  <navigator open-type='navigateBack' delta="1">跳转</navigator>
 

image 标签特性：

 <!-- 图片懒加载 -->
  <image class='b_333' lazy-load='{{true}}' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image>

  <!-- binderror事件 -->
  <image class='b_333' binderror='imageErr' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jp'></image>

  <!-- bindload事件是图片加载完成，需要开启图片懒加载 -->
  <image class='b_333' lazy-load='{{true}}' bindload='imageLoad' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image>
</view>

/* 图片标签样式 */
.b_333 {
  margin-top: 20rpx;
  border: 1rpx solid #333;
}

  imageErr: function(e) { //  图片加载错误
    console.log("图片加载错误")
    console.log(e);
  },
  imageLoad: function(e) { //  图片加载完成
    console.log("图片加载完成")
    console.log(e);
  }