微信小程序

微信小程序简介

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用
全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。
2017年1月9日，张小龙在2017微信公开课Pro上发布的微信小程序正式上线。

为什么要有小程序和跟普通H5区别？

性能提升

• 小程序性能高于H5
• 使用开发的一套组件：view，text，swiper
• 有自己一套api wx.xxx

商业原因

区别

• 小程序删除dom 和 bom 的api，只有EcmaScript api, 而浏览器有dom api

• 运行机制不同：

  • 普通H5单线程执行

  • 小程序是多线程执行 :

    • 渲染线程
    • 逻辑线程（js）

• 运行环境不同

  • 小程序宿主环境 ：微信
  • 普通H5使用的浏览器

微信小程序项目创建和目录结构

• 使用流程

  • 注册小程序账号
  • 安装微信开发者工具
  • 创建项目

• 小程序目录结构

  • app.js 项目入口文件 相当于vue中的main.js
  • project.config.json 编辑器的配置文件
  • sitemap.json 是否允许微信搜索小程序内部的某些页面
  • utils 目录
    • 用于存储项目中常用的工具方式
  • pages目录 项目开发目录
    存放项目页面文件，小程序页面文件包括4中文件类型
    xxxx.wxml 相当于H5的html
    xxxx.wxss 相当于H5中的css
    xxxx.js 页面逻辑的js
    xxxx.json 页面的配置文件

微信小程序核心语法

插值语法

{{ 插值 }}

遍历

• wx:for wx:key

 <view class="list2">
    <view 
        class="item" 
        wx:for="{{ users }}" 
        wx:for-item='itm'
        wx:for-index='idx'
        wx:key='id'
    >
      <view>{{ idx+1 }}--姓名: <text>{{ itm.name }}</text> </view>
      <view>年龄: <text>{{ itm.age }}</text> </view>
    </view>
  </view>

注意：
wx:for-item：修改每项的遍历名称
wx:for-index：修改每项的遍历下标

条件渲染

• wx:if 类似于vue-if

<view class="list2" wx:if="{{ users.length>0 }}">
    <view 
        class="item" 
        wx:for="{{ users }}" 
        wx:for-item='itm'
        wx:for-index='idx'
        wx:key='id'
    >
      <view>{{ idx+1 }}--姓名: <text>{{ itm.name }}</text> </view>
      <view>年龄: <text>{{ itm.age }}</text> </view>
    </view>
  </view>
  <view wx:else>没有用户信息</view>

• hidden:类似于vue的v-show hidden取的相反

事件绑定

• bind+事件名 事件冒泡
• catch+ 事件名 阻止事件冒泡

事件传参

• 通过data-自定义属性名传参
• 代码展示：

//WXML
<button  catchtap='deleteItem' data-id="{{ itm.id }}">删除</button>

//JS
//删除列表项
  deleteItem(e) {
    const {id}=e.currentTarget.dataset;
    console.log('删除:',id)
    //通过id找下标
    const index=this.data.users.findIndex(item=>{
      return item.id===id
    })
  
    this.data.users.splice(index,1)
    this.setData({
      //要更新的变量:要更新的值
      users:this.data.users
    })
    
  },

数据与视图如何同步

• this.setData()
• 代码演示：

 this.setData({
      //要更新的变量:要更新的值
      users:this.data.users
    })

案例：

如果更新某一个属性值，如何实现

    //需求：点击某个，让对应用户年龄+1
	const str=`users[${index}].age` 
	this.setData({ 
      //要更新的变量:要更新的值
     [str]:th  e+1
    })