分类:
小程序
小程序是什么？
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载
小程序目录结构
.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中使用即可
50010702506256
