微信小程序基础知识

微信小程序

基础知识点

组件使用的严格的XML标准（开闭标签问题）

写路径的时候不需要写扩展名，系统根据路径统一执行
文件夹里面的json会优先外部的json执行

navigationBarBackgroundColor导航条背景颜色
navigationBarTitleText导航条文本内容
navigationBarTextStyle导航条文本样式颜色

标签栏配置：
list里的对象2-5个，iconPath是未选中时候的图标，selectedIconPath是被选中时的图标。selectedColor是被选中时的颜色。

"tabBar": {
    "list": [{
        "pagePath": "pages/about/about",
        "text": "关于",
        "iconPath": "image/icon/ab1.png",
        "selectedIconPath": "image/icon/ab2.png"
      },
      {
      "pagePath": "pages/weekly/weekly",
      "text": "每周推荐",
      "iconPath": "image/icon/m1.png",
      "selectedIconPath":  "image/icon/m2.png"
                }
                ],
                "color": "#000000",
                "selectedColor": "blue"
    
  }

JS

1. 小程序不是运行在浏览器中的，所以没有DOM,BOM对象

2. 小程序的JS有一些额外的成员。比如：
   App方法:用来定义应用程序实例对象
   Page方法：用来定义页面对象
   getApp方法：用来获取全局应用程序对象
   wx对象，用来提供核心Api

3. 小程序的JS是支持CommonJS规范的。
   CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。require方法用于加载模块。

列表数据渲染

循环体默认遍历数据对象是item,默认遍历下标（索引）是index

js里data的数据（用法和vue相似）：
info[
    {name:"html",checked:true},
    {name:"css",checked:false}
]

<view wx:for="{{ info }}">
    <checkbox checked="{{ item.checked }}"></checkbox>
    <text>{{ item.name }}</text>
</view>

注意：
插值表达式如果写在标签里面，需要在{{}}外面加上双引号""
可以使用wx:for-item="a"给当前遍历数据对象起别名，本例中item别名为a
可以使用wx:for-index="i"给当前遍历下标起别名，本例中index别名为i

事件处理

1. 事件基本使用 bind[xxx] xxx是事件名
   <button bindtap="inHandle"></button>

2. 其中catchtap="函数名"绑定事件并且阻止冒泡

3. 给函数传参通过<data-name="zs">
   事件处理函数里面的this指向的还是页面对象！

inHandle: function(e){
    //e.target拿到的是点击的元素，dataset指的是元素上所有以data开头的属性集合
    console.dir(e.target.dataset)
}

单向数据流，实现双向绑定

//bindinput输入框里的值发生变化，就会触发inHandle函数
<input value="{{ message }}" bindinput="inHandle"/>>
<text>{{ message }}</text>

data:{
    message:"first"
}
inHandle: function(e){
    //this.setData用来改变data中的数据，e.detail.value可以拿到输入框里的值
    this.setData({
        message:e.detail.value
    })
}

条件渲染

block是一个控制属性（wx:）的载体，页面渲染的时候没有实际意义。
block wx:if="{{ !show }}"> 条件为假的时候不渲染，没有该元素
而hidden="{{ !show }}只是把元素隐藏起来了（频繁切换建议使用）

wxss和css差异

在不同的设备让相同的代码可以起作用。开发的时候建议用iphone6作为标准
rpx可以根据屏幕宽度进行自适应，规定屏幕宽度为750rpx或者20rem

基础组件内容

icon：type，size，color用于定义图标类型，大小，颜色
text: 可以控制页面上的内容，可以嵌套，还支持换行。
progress： 进度条。

表单组件（更多看官方文档）

button一些属性：
type 的合法值primary，default,warn
size 的合法值default，mini。
plain 镂空，背景色透明。
hover-class=“类名” 指定按钮按下去的样式类。

input 输入框。type类型 placeholder输入框为空时占位符 placeholder-style指定 placeholder 的样式等等

API 界面 交互（更多看官方文档）

wx.showModal显示模态对话框
wx.showLoading显示loading提示框。
wx.showActionSheet显示操作菜单。

组件的分类

1. 功能型组件
2. 布局型组件
3. API型（使用的角度）

页面间的跳转和传值

快速创建页面：app.json中pages里写好路径后，系统自动创建相关的页面

页面之间的跳转：<navigator url="../demo2/demo2">点击我跳转</navigator> ，url是相对路径。
json文件必须有内容，否则无法显示正常页面，里面可以加一个花括号{}也行。

页面间参数传递：

1. 传值 跳转链接上加问号参数。
   <navigator url="../demo2/demo2?name=小明&age=18">小明</navigator>
2. 接受 onload 的第一个参数（对象）

  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    console.log(options)
  }

页面导航模式（不再返回）：加上 redirect
<navigator url="../demo2/demo2" redirect>跳转过去（不回来了）</navigator>

导航元素点击高亮：

<navigator hover-class="my-hover">点我点我</navigator>
.my-hover {
    color: red;
}

或者使用 cursor pointer 的方式，可以让任何元素点击时高亮

<image class="hover-demo" src="../../images/poster.jpg"></image>
.hover-demo {
    cursor: pointer;
}

页面导航ApI

<button type="primary" bindtap="tapHandle">跳转过去</button>

    tapHandle: function () {
        wx.navigateTo({
          url: '../demo2/demo2?id=123'
        })

        // 或者，跳转过去（不再有回来按钮）
         wx.redirectTo({
           url: '../demo2/demo2'
         })
    }


    <button bindtap="backHandle">返回</button>

      backHandle: function () {
    // 默认返回到上一页
    // wx.navigateBack()

    // 指定delta 就是返回到指定页面
    // delta 过大（超出历史记录）默认返回最开始的页面
    wx.navigateBack({
      delta: 100
    })
  }