微信小程序

微信小程序

 小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

1.申请账号

 微信公众平台官网首页https://mp.weixin.qq.com/

 登录 小程序后台 ，我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID(很多地方需要用到,还有服务号或订阅号的 AppID)

2.安装开发者工具

 下载微信开发者工具,登录后界面
 添加新的项目

3.打开创建好的小程序

4.小程序目录结构

 根目录主体文件由三个文件组成,app.js/app.json/app.wxss,
 项目目录中允许上传的文件
  wxs;png;jpg;jpeg;gif;svg;json;cer;mp3;aac;m4a;mp4;wav;ogg;silk
  这些文件格式之外的格式无法上传

4-1.小程序页面的组成

 一个小程序页面由4个文件组成
 1.js
 2.wxml
 3.wxss
   CSS 样式文件,具有CSS大部分特性,支持部分CSS选择器
 4.json
  每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置
  .json 后缀的 JSON 配置文件，是一种数据格式，json文件中无法使用注释

 微信客户端会先根据json文件生成界面,window中可以配置顶部的颜色文字等,然后加载页面的wxml结构和wxss样式,最后装载js文件

5.小程序配置

5-1.全局配置app.json

 根目录下的 app.json 文件用来对微信小程序进行全局配置,文件内容是一个对象

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

 1.pages(必填)
  页面路径列表,是一个数组,页面上的显示顺序按照数组中的顺序来排列的

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/user/user"
  ]

 2.window
  全局的默认窗口表现,配置头部

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff000",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle":"black"
  }

 3.tabBar
  配置底部导航栏
  list是tabBar的列表,数组,最少2个最多5个,属性是对象数组
  text:字符串,tabBar的标题
  iconPath:Tabbar项的icon图片路径，建议使用绝对路径
  selectedIconPath:Tabbar项被选中时的icon图片路径
  pagePath:跳转页面路径

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath":"/ico/home.png",
        "selectedIconPath":"/ico/home-active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath":"/ico/log.png",
        "selectedIconPath":"/ico/log-active.png"
      },
      {
        "pagePath":"pages/user/user",
        "text":"用户"
      }
    ]
  }

 4.style
  使用指定升级后的wxui样式

"style": "v2"

 5.sitemapLocation(必填)
  指明sitemapLocation.json的位置

"sitemapLocation": "sitemap.json"

  sitemap.json文件用于配置小程序及其页面是否允许被微信索引,如果没有 sitemap.json ，则默认为所有页面都允许被索引

5-2.页面配置

 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项
 1.navigationBarBackgroundColor
  类型：HexColor,16进制
  导航栏背景色
 2.navigationBarTextStyle
  类型：String
  导航栏标题颜色,仅支持black/white,默认值white
 3.navigationBarTitleText
  类型：String
  导航栏标题文字内容
 4.backgroundColor
  类型：HexColor
  窗口的背景色
 5.backgroundTextStyle
  类型：String
  下拉loading的样式,仅支持dark/light

5-3.sitemap配置

 小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page",
    "params": ["a", "b"],
    "matching": "exact"
  }, {
    "action": "disallow",
    "page": "path/to/page"
  }]
}

6.组件

6-1.视图容器

6-1-1cover-view

 覆盖在原生组件上的文本视图
 可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher
 只支持嵌套cover-view、cover-image,可在cover-view中使用button，单位默认为px

6-1-2cover-image

 覆盖在原生组件之上的图片视图
 可覆盖组件同cover-view
 属性：
  src:图片路径,支持临时路径,网络地址,云文件
  bindload:图片加载成功时触发
  binderror:图片加载失败时触发

6-1-3view

 视图容器，相当于div标签
 属性：
  hover-vlass:指定按下去的样式,默认为none

hover-class="none"   设置为这样时,没有点击效果

  hover-stop-propagation:指定是否阻止本节点的祖先节点出现点击态,默认为false
  hover-start-time:按住后多久出现点击态,单位ms,默认50
  hover-stay-time:手指松开后点击态保留时间,单位ms,默认400

6-1-4scroll-view

 可滚动视图区域
 使用时,需要设置一个固定的高度
 属性：
  scroll-x：允许横向滚动,默认false
  scroll-y：允许纵向滚动,默认false
  scroll-into-view：值为子元素的id值,用于跳转到指定子元素的位置

mpvue中的使用
<template>
	<scroll-view class="scroll-view" scroll-y :scroll-into-view="letter">
		<div v-for="(val,index) in cityData" 
			:key="index" 
			class="main" 
			:id="val.letter"
		>
			<div>{{val.letter}}</div>
			<ul>
				<li v-for="(v,i) in val.citys" :key="i" @click="showCity(v)">
					{{v}}
				</li>
	        </ul>
	    </div>
	    <ul class="hotDoor">
	       <li v-for="(val,index) in cityData" 
	           :key="index" 
	           @click="scrollIntoView(val.letter)"
	        >{{val.letter}}
	        </li>
	    </ul>
	</scroll-view>
</template>
<script>
let cityData = require('../../utils/cityData.js')
export default {
    data(){
        return {
            cityData,
            letter:"",
        }
    },
    methods:{
        scrollIntoView(letter){
            console.log(letter)
            this.letter = letter
        },
    }
}
</script>

7.路由

7-1.ws.switchTab

 跳转到tabBar页面,并关闭其他所有非tabBar页面
 参数：
  url:需要跳转的tabBar页面的路径,路径后不能带参数,必填
  success:接口调用成功的回调函数
  fail:接口调用失败的回调函数
  complete:接口调用结束的回调函数(成功失败都会执行)

json文件
{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}
js文件
wx.switchTab({
  url: '/index'
})

7-2wx.navigateTo

 保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面
 使用 wx.navigateBack可以返回到原页面
 参数：
  url:需要跳转的应用内非tabBar的页面路径,路径后可以带参数,?分隔
  必填
  events:页面间通信接口,用于监听被打开页面发送到当前页面的数据
  success:接口调用成功的回调函数,eventChannel参数,用于和被打开页面进行通信
  fail:接口调用失败的回调函数
  complete:接口调用结束的回调函数(成功失败都会执行)

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

7-3wx.redirectTo

 关闭当前页面，跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面
 参数与wx.switchTap相同

wx.redirectTo({
  url: 'test?id=1'
})

7-4wx.reLaunch

 关闭所有页面,打开到应用内的某个页面
 参数与wx.switchTap/wx.redirectTo相同

wx.reLaunch({
  url: 'test?id=1'
})

// test
Page({
  onLoad (option) {
    console.log(option.query)
  }
})

8.事件

8-1什么是事件

 事件是视图层到逻辑层的通讯方式。
 事件可以将用户的行为反馈到逻辑层进行处理。
 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
 事件对象可以携带额外信息，如 id, dataset, touches。

8-2事件分类

 事件分为冒泡事件和非冒泡事件
  冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递
  非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递
 事件冒泡列表：
  touchstart:手指触摸动作开始
  touchmove:手指触摸后移动
  touchcancel:手指触摸动作被打断，如来电提醒，弹窗
  touchend:手指触摸动作结束
  tap:手指触摸后马上离开

8-3事件绑定

8-3-1bindtap

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
//在相应的Page定义中写上相应的事件处理函数，参数是event
Page({
  tapName: function(event) {
    console.log(event)
  }
})
{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "hi":"WeChat"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "hi":"WeChat"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

8-3-2catchtap

 catch会阻止事件向上冒泡
 点击click3会先后调用fn3和fn2(因为tap事件会冒泡到click2，而click2 阻止了 tap 事件冒泡，不再向父节点传递)，点击click2会触发fn2，点击click1会触发fn1

<view bindtap="fn1">
  click1
  <view catchtap="fn2">
    click2
    <view bindtap="fn3">
      click3
    </view>
  </view>
</view>