微信小程序学习笔记

小程序是什么？

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载

小程序目录结构

.js/,json/.wxml/.wxss组成页面

小程序配置.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

Pages:配置小程序页面路径

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

tabBar：如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面

小程序生命周期

onLaunch：监听小程序初始化时
onShow：监听小程序启动或切前台
onHide：监听小程序切后台。
onError：错误监听函数。
App:共享给所有页面使用在页面值使用getApp()得到app实例并使用里面定义的方法与变量
页面生命周期

// pages/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    type:""
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

页面跳转（路由）

组件跳转：navigator

url：跳转的路径
open-type:跳转方式
navigatorTo：打开新页面 默认打开方式
redirectTo ：重定向
navigateBack ：返回上一页
switchTab ：打开tab选项卡  在app.js中的tabbar配置过得页面这位tab选项卡页面而选项页面只能用该类型打开
reLaunch ：重新打开

js跳转:

wx.navigatorTo：打开新页面
wx. redirectTo ：重定向
wx. navigateBack ：返回上一页
wx. switchTab ：打开tab选项卡
wx. reLaunch ：重新打开

页面与页面之间路由传值：

路径传值：pages/info/info?id=1
得值：在页面的onload生命周期中使用options.id即可
数据绑定
在wxml中使用“{{str}}”的方式绑定数据

循环绑定数据

使用wx:for=”{{obj}}”
可以使用wx:for-index设置索引的名称如果不设置默认为index
Wx:for-item设置循环后每项值得名称不设置默认为item

<view wx:for="{{arr}}" wx:key="{{this}}">
  {{index}}----{{item}}
</view>

模板

注意：模板不是组件
模板只是一个被template包裹的一个代码块而已并不是组件

<template name="mytemp">
      <view>我是一个模板传递进来的值为：{{name}}</view>
</template>
<template is="mytemp" data="{{name}}"></template>
<template is="mytemp" data="{{name}}"></template>

引用模板：

创建一个.wxml文件在里面编写模板

使用import引入模板文件

<template name="myclass">
  <view class="list-box">
    <view wx:for="{{datalist}}" wx:key="{{this}}" class="list-item">
      <view>
        <image src="{{item.src}}"></image>
      </view>
      <view>{{item.title}}</view>
    </view>
  </view>
</template>

引用：

<import src="../../template/list.wxml" />
<template is="myclass" data="{{datalist}}"></template>

组件

小程序中的组件原理vue、angular等js框架原理类似。可以父组件向子组件传值、子组件向父组件传值、

注意组件不是页面：创建的组件的js文件中构造函数是component而页面的js中是page、同时创建的组件也不会存在app.js中的pages字段中

slot

Component的slot（slot意思是插槽），主要是让你在外部的wxml可以自由的在你的Component的wxml里插入模块。默认情况下，一个组件的wxml只可能有一个slot。需要使用多个时，可以在组件js中声明启用。

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

使用多个插槽

<web39-nav><view slot="one">123456</view><view slot="two">哈哈哈</view></web39-nav>

组件样式编写注意事项

? 组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。

? 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。

? 子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。

? 继承样式，如 font 、 color ，会从组件外继承到组件内。

? 除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效

创建一个组件

一个组件需要包括json、wxml、wxss、js四个文件组成
创建一个文件夹component来存放公共组件
在component文件夹中穿件自己的组件选择新建component即可
创建组件后组件.json中存在声明组件配置

Component：true

Data:

初始化数据

data: {
    obj:"小明"
  },

Methods

组件内自定义函数

<text bindtap="myclick" data-index="{{index}}">{{item}}</text>
myclick:function(e){
      var index = e.target.dataset.index
      console.log(this.data.datalist[index]);
}

使用组件

在需要使用组件的页面json文件中引入与配置组件名如：

"usingComponents": {
    "web39-nav":"/components/nav/nav"
  }

在页面wxml中使用并向nav组件传值

<web39-nav title=”{{shoptitle}}”></web39-nav>

父组件向子组件传值：

1、 创建接受传值的参数：
在js文件中的component函数中的properties用于声明属性（也就是接受的参数）：

properties: {
     title:{
       type:String,
       value:"这是标题"
     }
  },

组件向页面传值
组件向页面传值是使用的出发自定义事件的方式传递

在组件中使用this.triggerEvent()出发页面中定义的自定义事件并传值页面中定义函数来接受传值

页面中自定义事件使用bind:xxx 其中getdata为接收组件传递过来值得函数

<web39-nav bind:getcom="getdata" title="首页" datalist="{{listdata}}"></web39-nav>

组件中出发自定义事件

myclick:function(e){
      var index = e.target.dataset.index
      //出发页面上自定义的事件名
      this.triggerEvent("getcom", this.data.datalist[index])
}

创建组件步骤：

1、 声明组件

2、 接收传值

3、 挂载子组件

4、 使用子组件并传递数据

小程序api

界面设置

交互：

ShowToast：消息提示框
wx.showToast({
title: ‘提示框会自动消失’,
icon:“none”
})
showModal：模态对话框
wx.showModal({
title: ‘对话框’,
content: ‘是否xxx?’,
success:function(res){
if(res.confirm){
console.log(“点击了确定”)
}
}
})
showLoading：显示预加载效果
hideLoading:隐藏预加载效果
wx.showLoading({
title: ‘加载中’,
})
setTimeout(function(){
wx.hideLoading();
},2000)

导航栏

showNavigationBarLoading

在当前页面显示导航条加载动画

hideNavigationBarLoading

在当前页面隐藏导航条加载动画

setNavigationBarTitle

动态设置当前页面的标题

setNavigationBarColor

设置页面导航条颜色

hideHomeButton

隐藏返回首页按钮

pagescrollTo滚动到页面指定位置（可以设置指定px位置也可以滚动到指定节点）

wx.pageScrollTo({
selector:"#"+id
})

网络

request

发起请求

注意：在发起网络请求是一定要在开发设置中去配置服务器地址

downloadFile

文件下载

WebSocket即时通讯（聊天）

分为4个步骤

1、 链接socket地址

connectSocket

创建一个 WebSocket 连接

2、 接受响应数据

onSocketMessage

接受响应数据

3、 发生数据

sendSocketMessage

4、 关闭链接

closeSocket

数据缓存

Storage

视频

使用createVideoContext方法创建一个视频对象返回一个VideoContext对象所有视频操作方法属性都在其中

Ui框架的使用vant weapp

引入方式有两种

下载vant组件包放置到项目更目录进行引入使用

下载ui组件库下载地址：https://github.com/youzan/vant-weapp

下载完毕后把解压出来的dist文件拷贝到项目根目录即可

使用：在app.json或指定的页面.json中引入如下：

“usingComponents”:{
“van- field”:”/dist/ field/index”
}

使用npm下载并引入使用

使用npm安装引用

1、 在项目根目录下命令行工具中输入npm init

2、 输入 npm install –production

3、 安装 npm i vant-weapp –S –production

4、 点击菜单中的工具构建npm 并选择使用npm包

组件中使用：

在app.json或指定的页面.json中引入如下：

“usingComponents”:{
“van- field”:”vant-weapp/ field”
}

在wxml中使用即可