小程序第一天学习总结双向绑定：小程序通过插值语法—大括号实现时间的绑定当我们开发的时候需要使用其他的属性替换默认的it

双向绑定：小程序通过插值语法—大括号实现时间的绑定

    Page({
        data: {
            msg: 'hello world 小程序'
        }
    })
    
    <view>{{msg}}</view>
    
    // 双向数据绑定
    <view>{{msg}}</view>
    <input name="number" value="{{msg}}" >

当我们开发的时候需要使用其他的属性替换默认的item时可以自定义访问单元值和索引值

    <view class="item" wx:for="{{students}}" wx:for-index="key" wx:for-item="student">
        <text>{{key + 1}}</text>
        <text>{{student.name}}</text>      //一般来说，这里是item.name，但是为了防止重名，可以自定义wx:for-item="student"
        <text>{{student.age}}</text>
        <text>{{student.gender}}</text>
    </view>

条件渲染wx:if wx:elif wx:else

不建议将wx:if放在循环标签里面，而应该放入类似于vue的template空标签block里面，以此能提升性能。

     <view class="item" wx:for="{{students}}" wx:key="name" > 
       <block wx:if="{{item.age > 18}}">   //这是空标签block
            <text>{{index + 1}}</text> 
            <text>{{item.name}}</text> 
            <text>{{item.age}}</text>
            <text>{{item.gender}}</text>
       </block>
    </view>
  
    <button type="primary" bind:tap="toggle">显示/隐藏</button>
    <view wx:if="{{seen}}">{{msg}}</view>
    <view hidden="{{!seen}}">{{msg}}</view>

对比 wx:if 和 hidden 二者的区别

wx:if 在条件为 true 时会将内容渲染出来，否则不会进行渲染，是通过【添加/删除】节点的方式来实现的。
hidden 在条件为 true 时会隐藏内容，否则会显示内容，是通过 display 样式属性来实现的。

生命周期是一组名称固定且会自动被调用执行的函数，分为应用级别、页面级别和组件级别3种类型

应用级别：应用级别的生命周期函数定义在 `app.js` 当中，且生命周期函数的名称及执行情况如下表所示：

场景值

所谓的场景描述的是用户打开小程序的方式，如扫码、搜索、分享等，并且每个场景都对应了一个数值，即场景值，根据这个场景值来判断用户打开小程序的方式，进而分析用户的行为，常见的场景值如下表所示：

获取小程序的场景值只能在全局生命周期函数的onLaunch和onShow中获取

    App({
        onLaunch(params){
            console.log(params.scene)
        },
        onShow(params){
            console.log(params.scene)
        }
    })

页面级别

页面级别的周期函数写在页面对应的页面.js当中：

// pages/index/index.js
    Page({
      // ...省略前面小节的代码
      onShow() {
        // 其次执行
        console.log('首页处于显示状态...')
      },

      onReady() {
        console.log('首页初次渲染完成了...')
      },

      onLoad() {
        // 最先执行
        console.log('首页面加载完毕...')
      },

      onHide() {
        console.log('首页处于隐藏状态...')
      },

      onUnload() {
        console.log('首页面即将卸载...')
      }
    })

生命周期的特点：

onReady和onLoad只会执行一次
onShow和onHide不重复执行
普通链接跳转及切换Tab界面不会卸载，页面处理隐藏的状态

获取地址参数

<!-- 省略前面小节的代码 -->
<navigator url="/pages/logs/logs?name=小明&age=18">跳转到日志页面</navigator>

小程序中通过地址参数与网页是一致的，格式为 ?key1=value1&key2=value2 在另一个界面需要在onLoad函数里面获取参数

内置API

小程序 API 是小程序内置提供的一系列的方法，通过这些方法能够实现许多的功能，比如网络请求、本地存储、微信支付、拍照、扫码等，这些 API 通过全局对象 wx 进行调用。

网络请求

wx.request API 是用来发起网络请求的，类似于网页中的 ajax

//发送网络请求，调用接口
    wx.request({
      // 接口地址
      url: 'api/path/xxx',
      // 请求的方法
      method: 'GET｜POST|PUT',
      // 请求时的数据
      data: {},
      success(res) {
        // 成功响应的回调
      }
    })

注意：在通过wx.request调用接口的服务器地址（域名）时候，必须事先在小程序的管理后台进行设置，否则不允许发送网络请求，解决此问题的两种方式：

在小程序管理后台进行设置
在小程序开发工具中进行设置

说说小程序的开发流程

用qq邮箱注册小程序账号并完善小程序相关信息
获取小程序唯一标识AppID
下载微信开发者工具输入AppID新建小程序项目后进行小程序开发
在进行小程序开发时，我们可以充分利用开发者工具提供的调试器和预览及真机调试以及编译模式功能协助开发

小程序是如何上线的

文件忽略：上线前将与逻辑代码无关的文件进行删除或者通过配置来忽略这些文件
小程序开发并调试完毕后直接点击【上传】按钮，填写版本信息后小程序会被上传到微信的服务器当中（小程序的体积不能超过2M，超过2M需要采用分包功能）
体验版：将小程序设置为体验版，用于公司产品/测试/运营人员使用
提交审核
发布上线：将小程序发布到微信小程序应用商店去

小程序第一天学习总结