小程序基础(一)

小程序一共分为9大类

• 视图容器
• 基础内容
• 表单组件
• 导航组件
• 媒体组件
• Map地图组件
• canvas画布组件
• 开放能力
• 无障碍访问

微信小程序是由微信作为宿主换环境的网页，它由微信团队研发，所用的标签与前端三件套类似，但又不同于三件套，比如一些标签

<view></view>  // 类型div
<text></text>  //类似p
<swiper></swiper>  //滚动视图等等

插值表达式

• 定义插值表达式，跟我们在Vue里面定义插值表达式是一样的

  

动态绑定属性

• 动态绑定属性，在跟Vue有很大的不同，就是在Vue里面是使用冒号，而在小程序里面依然是使用插值表达式

  

插值表达式使用三元运算符

动态渲染数据

• 在小程序规范当中，我们无法直接给一个data定义的数据直接进行双向绑定，所以小程序规范就专门规定了一种数据渲染方式。

  • 第一项是在data里面定义的值，第二项是要赋值的值
  • 在setData里面要拿到原始的值，我们可以使用this.data.title,用来获取原始值（改变之前的值）

  array (){
   this.setData({
            title: response.data
          })
  

发起网络请求

• 在我们小程序规范当中，大家都知道，小程序的载体是微信，而跨域问题只是在浏览器里面才有，而小程序里面是没有跨域的问题。

• 但为了保证小程序的安全性，微信官方在小程序上线当中，就规定要检验合法域名，其中有三点值得注意：域名必须备案、发起的http请求必须是HTTPS、域名必须在小程序后台进行配置合法域名.

      wx.request({
        url: 'http://localhost:3000',
        method: 'GET', // 请求方式
        success: (response: response) => {  // 请求成功的回调函数
          this.setData({   // 实现页面渲染的方式
            title: response.data
          })
        }
      })
  

全局文件的配置方式

• 在小程序中，全局配置文件是app的模块，同样我们在页面的JSON里面定义的数据，它就是私有属性

小程序事件

在原生开发小程序的过程中，一共有三种方式：点击事件、input输入框事件

​ 在开发的过程中，我们小程序的宿主环境是微信，所以没有@click事件，只有点击事件，同样在点击事件过程中，我们无法在点击事件上绑定值，所以我们要单独定义值 data-*,定义好之后，我们就可以通过点击事件本身event的自身属性去拿到我们定义的值。

<view>
  <button bindtap="add" data-key="{{1}}"></button>
</view>
//拿到事件参数

 add(event){
    console.log(event.target.dataset.key);
  },

​ 同样我们去监听时间，它同样需要我们去定义bindinput事件，用来监听输入框值得变换事件

<view>
  <button bindinput="input" data-key="{{1}}"></button>
</view>  
// 拿到值
input(event){
    console.log(event.detail.value);
  },

文章到此就结束了，感谢大家阅读，你们的点赞就是我继续写下去的动力。