微信小程序基础总结

## 小程序的组成

   1. .json文件（配置文件）

   2. .js文件（逻辑交互文件）

   3. .wxml文件（类似于html 结构文件）

   4. .wxss文件（样式文件）

## app.json全局配置文件：

  一、pages属性：

    表示小程序中应用到的页面路径列表 所有的小程序页面都在其中，创建新页面时可以直接在pages中新增页面路径，开发工具会自动根据路径创建相应文件夹。

  二、windows属性：

    用于设置小程序的状态栏、导航条、标题、窗口背景色。

    常用属性：

  1. navigationBarBackgroundColor   导航栏背景颜色，如 #000000 

  2. navigationBarTextStyle   white 导航栏标题颜色，仅支持     black / white 

  3. navigationBarTitleText   导航栏标题文字内容 

  4. navigationStyle    default 导航栏样式，仅支持以下值：

       default 默认样式

       custom 自定义导航栏，只保留右上角胶囊按钮

  5.  backgroundColor   #ffffff 窗口的背景色（下拉加载部分背景颜色)

  6. backgroundTextStyle    dark  下拉 loading 的样式，仅支 持 dark / light  

  7. backgroundColorTop   #ffffff 顶部窗口的背景色，仅     iOS 支持 微信客户端 6.5.16

  8. backgroundColorBottom    #ffffff 底部窗口的背景色，仅     iOS 支持 微信客户端 6.5.16

  9. enablePullDownRefresh    false 是否开启全局的下拉刷新。

  10. onReachBottomDistance number  50  页面上拉触底事件触发时距页    面底部距离，单位为 px。

  11. pageOrientation string  portrait  屏幕旋转设置，支持 auto /  portrait / landscape 

  三、tabBar属性：

   配置多个底部导航栏

   "tabBar": {

    "list": [{

      "pagePath": "pagePath",//页面路径，必须在pages中先定义(不能以/开头)

      "text": "text",//按钮文本

      "iconPath": "iconPath",//图标路径，不支持网络图标

      "selectedIconPath": "selectedIconPath"//选中时的图片路径，不支持网络图标

    }]

  },

  其中list内内容至少两个，最多五个。

## 页面中的json文件 页面配置

  每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象，有以下属性：

  属性    默认值   描述

  navigationBarBackgroundColor    #000000 导航栏背景颜色

  navigationBarTextStyle  white 导航栏标题颜色，仅支持   black / white 

  navigationBarTitleText    导航栏标题文字内容 

  navigationStyle   default 导航栏样式，仅支持以下值：

  default 默认样式

  custom 自定义导航栏，只保留右上角胶囊按钮。

  backgroundColor   #ffffff 窗口的背景色  

  backgroundTextStyle   dark  下拉 loading 的样式，仅支持   dark / light 

  backgroundColorTop    #ffffff 顶部窗口的背景色，仅 iOS 支持   微信客户端 6.5.16

  backgroundColorBottom   #ffffff 底部窗口的背景色，仅 iOS 支  持 微信客户端 6.5.16

  enablePullDownRefresh   false 是否开启当前页面下拉刷新。

  onReachBottomDistance   50  页面上拉触底事件触发时距页面底部距  离，单位为px。

  pageOrientation   portrait  屏幕旋转设置，支持 auto /   portrait / landscape

  disableScroll   false 设置为 true 则页面整体不能上下滚动。

  只在页面配置中有效，无法在 app.json 中设置  

  usingComponents Object  否 页面自定义组件配置

  initialRenderingCache string    页面初始渲染缓存配置  

  style   default 启用新版的组件样式

  singlePage  Object  否 单页模式相关配置

  restartStrategy   homePage  重新启动策略配置

## 小程序 语法

每一个js文件中都有一个Page({})实例

<view></view>组件相当于html的div

数据绑定：类似于vue语法

<!--wxml-->

<view> {{message}} </view>

// page.js

Page({

  data: {

    message: 'Hello MINA!'

  }

})

列表遍历渲染：wx:for

<!--wxml-->

<view wx:for="{{array}}" wx:key="index"> {{item}} </view>

// page.js

Page({

  data: {

    array: [1, 2, 3, 4, 5]

  }

})

## 在小程序中绑定点击事件(触屏事件)使用 bindtap="事件名"

   调用方法直接接在页面js的page实例中即可，小程序没有methods属性

## this.setData

   若需要更新视图需要使用 this.setData({})方法改变数据更新视图

   this.setData({

     要更新的dtat中属性:更新的数据

   })

## app.js中创建的全局方法在其他页面调用

   首先先使用getApp()获取小程序应用实例app  let app=getApp();

      （注意：此代码写在page实例外，一般写在最顶部）

   然后使用 app.方法名称 调用app.js中的自定义方法

## wxss

在wxss中我们不使用px使用的是rpx，一般情况下1rpx=0.5px

## 小程序中组件的使用

   直接看开发文档的组件 使用哪个复制就行了

   最常用的几个组件：

   swiper轮播组件

   富文本组件(用来解析展示html标签)

   button按钮

   text类似于span

   <navigator url="/xxx">点击后页面跳转</navigator>

   image 可以使用网络图片

## 小程序的生命周期

在app.js中必须有一个App实例

在每个页面的js文件中必须有一个Page实例

   小程序生命周期分为三类：

   1. 小程序应用生命周期(app.js中的生命周期)

      小程序初始化生命周期  onLaunch() {} 小程序初始化时调用

      监听小程序启动 onShow(){}

      监听小程序切换后台 onHide(){}

      错误监听函数 onError(){}

      页面不存在监听函数 onPageNotFound(){}

      未处理的Promise拒绝事件监听函数 onUnhandledRejection(){}

   2. 小程序页面生命周期(每个页面的js文件中的生命周期)

      监听页面加载 onLoad: function (options) {},

      页面第一次渲染完成调用 onReady: function () {}

      页面显示时调用 onShow: function () {}

      (注意 onLoad和onReady只会调用一次，而onShow每次页面加载都会调用)

      页面隐藏时调用 onHide: function () {}  即切换页面时

      监听页面卸载 onUnload: function () {}

      监听用户下拉动作 onPullDownRefresh: function () {}

      页面上拉触底事件的处理函数 onReachBottom: function () {}

      用户点击右上角分享 onShareAppMessage: function () {}

      等等等 详见微信开发文档框架

   3. 小程序组件生命周期

     常用组件生命周期：

        lifetimes:{}用来存放组件生命周期的对象

         组件创建时调用，此时不能使用setData更新数据create(){}

         组件渲染时调用 attached(){}

         组件渲染后调用 ready(){}

         组件删除时调用 detached(){}

         其余生命周期见官方文档

        pageLifetimes：{} 组件所在页面的生命周期声明对象 可以在该对象中使用页面生命周期函              数 如show hide

## 小程序中的事件冒泡

   事件冒泡：触发子标签事件时会同时触发父标签的事件

   vue中阻止事件冒泡使用修饰符.stop  eg: @click.stop

   小程序中阻止事件冒泡使用catch绑定事件 catch+时间名称来阻止事件冒泡

   （例如：将原绑定事件的bindtag替换为catchtap）

## 小程序中的事件传参

   在小程序中绑定的事件不能加小括号进行传参  只能加事件名

   如：bindtap="click" 正确  bindTap="click()"  错误

   小程序中事件传参通过自定义data属性进行传递参数

   格式为：  data-属性名="属性值"

   获取方式：e.currentTarget.dataset.属性名

## 微信小程序自定义组件

  1. 在文件根目录下创建components文件夹，其中存放想要创建的组件文件夹

   2. 在components中创建组件文件夹 例如header文件夹

   3. 游记header文件夹 弹出的右键菜单栏中有一个新建Component选项，选择该选项，微信开发工具会自动在header文件夹下创建4个文件 header.js、header.json、header.wxml、header.wxss

      1) 自定义的组件js中实例为Component({})实例(必须有该实例)

      其中有：

      properties: {},组件的属性列表

      data:{},组件的初始数据

      methods:{}组件的方法列表  组件的方法要写在methods中，而不是直接写在实例中

      2) 自定义组件json文件中有键值对"component": true,表示这是个组件

      3) wxml和wxss与其他页面使用方法相同

   5. 自定义组件的引用：

      在哪个页面使用，就在哪个页面的json配置文件中先引入注册组件

      "usingComponents": {

       "自定义组件名称":"组件路径"

      },

      然后在要使用组件的页面wxml文件中使用

      <组件名称> </组件名称>

  6. 自定义组件中this指向当前组件实例

## 小程序组件间传值

父组件给子组件传值：

   将页面中data中数据传递给组件供组件使用：

   1. 给父组件中子组件组件绑定一个自定义属性 在小程序中给标签绑定自定义属性无需加:号，直接   写就可以了

   例如 给一个自定义组件child绑定一个list自定义属性

   <child list="{{绑定的data中数据}}"></child>

   2. child组件中获取传递的参数：

   在组件的js文件中  properties: {}中接收

   properties: {}  组件的属性列表  用来接收父组件传递过来的数据

   例如  properties: {

     list:Array//绑定的自定义属性名称:数据类型

   }

   然后就直接可以使用传递过来的list了

子组件给父组件传值：

   事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。

   1. 在子组件中 使用this.triggerEvent("自定义事件名称",将要传递的参数)发送一个自定义事件

   2. 在父组件中的子组件上绑定一个自定义事件 bind子组件传递的自定义事件名="自定义事件名"  如：child子组件传递的事件为getUser,则父组件上子组件绑定的自定义事件就要为bindgetUser="getUserName"

   3. 在父组件的自定义事件中使用 e.detail 获取子组件传递过来的参数

   如：getUserName(){

     let childValue=e.detail

   }

兄弟组件之间传值：

这个不常用，详见官方文档组件间通信与事件 | 微信开放文档获取组件实例部分

## 路由跳转传参

使用<navigator url="/路径"></navigator>组件进行路径跳转时可以在路径后面拼接参数进行传参 方式类似于get请求传参

例如：<navigator url="/路径?id=01"></navigator>

获取参数时在跳转后页面的js中onLoad: function (options) {}页面加载生命周期中使用自带的参数options.属性名进行获取

如 获取如上例子中传递的id  ：

    onLoad: function (options) {

      console.log(options.id)

    }

## 小程序中的双向数据绑定

双向数据绑定只能使用在表单标签！！！

使用model:value="{{绑定的数据}}"

不使用model:value而进行双向绑定：

1. 给input输入框绑定一个value属性(注意微信小程序的input必须有结束标识符/否则会报错)

2. 绑定一个input事件 bindinput="inputChange"  在输入框内容发生改变时就会调用

3. 事件inputChange(e){

let newValue=e.detail.value //获取输入框中最新的值

this.setData({//更新视图

    "data中要更改的属性":newValue

  })

}

## 微信小程序api

常用api:

  1. 获取系统详情

   wx.getSystemInfoAsync({

        success:(res)=>{

          console.log("调用成功")

          console.log(res);

        },

        fail:()=>{

          console.log("调用失败");

        }

      })

   2. 路由跳转

      1) wx.switchTab 只能跳转tabbar页面，不能跳转非tabbar页面 路径后面不能带参数

      wx.switchTab({

        url: 'url',

      })

      2) wx.navigateTo 跳转非tabbar页面 可以传递参数，传递方式于get请求相同

      wx.navigateTo({

        url: '/pages/info/info',

      })

      3) wx.reLaunch 关闭所有页面，打开到应用内的某个页面 可以传递参数，传递方式于get请求相同  允许跳转到tabbar

      wx.reLaunch({

        url: '/pages/info/info',

      })

      4) wx.redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。可传参

      wx.redirectTo({

        url: '/pages/info/info',

      })

   其余详见官方文档

## 小程序中请求传值

小程序中使用wx.request发送网络请求:

wx.request({

   url:"url",

   method:"请求方式",

  data:{},   //传递的参数,可为string object array

   success:(res)=>{ //请求成功后调用

      console.log(res)

   }

})

其余参数详见:https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

注意：微信小程序发送网络请求时，请求地址需现在小程序后台注册，否则会报错 解决方式:开发工具右上角详情--本地设置--不检验合法域名 就可以正常请求了