什么是小程序 ？
”无需下载‘”、”触手可及“、”即用即走“，无需下载安装，不用关心安装过多应用；换句话说小程序就是寄生于微信内的各种手机APP，它们不需要下载，不占用更多的手机内存，用完了后关闭即可，不需要删除。
小程序的优点
- 平台封闭，上手简单
- 跨平台运行
- 使用方便
小程序页面
- js： 页面逻辑
- json：页面配置
- wxml：页面结构 == HTML
- wxss：页面样式 == CSS
小程序单位
- 相关单位
- pt逻辑分辨率（视觉单位，和屏幕尺寸有关系）
- px物理分辨率（像素点）
- ppi：每英寸包含的像素点
- 小程序单位换算关系
- iphone6下1px=1rpx=0.5pt（rpx会在不同设备下转换、而px不会）；
导航栏配置
- app.json 里面
{
"window": {
"navigationBarBackgroundColor": "#ffffff", //导航栏背景颜色，
"navigationBarTextStyle": "black",//导航栏标题颜色
"navigationBarTitleText": "微信接口功能演示",//导航栏标题文字内容
"backgroundColor": "#eeeeee", //tab 的背景色，仅支持十六进制颜色
"backgroundTextStyle": "light"//下拉 loading 的样式，仅支持 dark / light
}
}
//页面添加导航栏
"pages":[
//哪个放在第一位就默认先显示哪个
"pages/user/user",
"pages/index/index",
"pages/logs/logs"
],
"tabBar": {
{
//首页在第一位 排序会把首页放在第一位
"pagePath": "pages/index/index",
"text": "首页"
}，
"list": [
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
摸板应用
- wxml
<template name='a'>
<view>
12
我的摸板
</view>
</template>
<view>
azzzaaaaa
</view>
在templates 里面创建一个a.wxml 在引入到 自己需要的文件中
<import src="../templates/a.wxml"></import>
<template is="a"></template>
<!-- 摸板之外的显示 -->
<include src="../templates/a.wxml"></include>
创建新的页面
- app.json
在pages里添加个user 你会发现 左面文件夹会多余出个user文件 里面包括（user.js 、user.wxml、user.wxss、user.json）
网络数据请求
wx.request({
url: 'https://jsonplaceholder.typicode.com/todos/2',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
路由跳转
- wx.switchTap:跳转到 tabBar 页面 ，并关闭其他所有非 tabBar 页面
- wx.navigateTo:保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
- wx.redirectTo:关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
- wx.reLaunch:关闭所有页面，打开到应用内的某个页面
自定义组件
- 创建自定义组件
找到文件夹components 里创建一个文件夹 名字随意 右击点击Component 然后随意写个名字 就会自动生成json，wxss，wxml，js - 使用自定义组件
在需要的文件中 填入
需要显示的wxml文件夹 中的json文件
{
"usingComponents": {
"my-component": "/components/my-componnets/index" //
} | |
} | |
名字 可随意起 路径
需要显示wxml文件
<view>
<my-component></my-component>
</view>
组件传参
组件间的基本通信方式有以下几种。
- WXML 数据绑定：用于父组件向子组件的指定属性设置数据
- 事件：用于子组件向父组件传递数据，可以传递任意数据。
- 如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。
WXML 数据绑定
显示的wxml
<view>
<my-component myname='aaa'></my-component>
</view>
组件wxml文件
<text>my-componnets/index.wxml</text>
{
{
myname}}
组件js文件
/*
* 组件的属性列表
*/
properties: {
myname: {
type: "string",
value: "默认值"
observer: (newValue, oldValue）=> {
console.log(newValue, oldValue)
}
}
},
事件
显示的wxml
<view>
<my-component myname='aaa' bind:myevent = 'myevent'></my-component>
//监听 myevent事件
</view>
显示wxml文件夹的js
Page({
myevent(e) {
console.log(e。detail) //参数
},
}
组件wxml
<button bindtap="changValue">点击</button>
子组件js
methods: {
changValue() {
this.triggerEvent("myevent", "参数")
}
}
slot 插槽
- 匿名插槽
<!-- 组件模板 -->
<view class="wrapper">
<view>这里是组件的内部节点</view>
<slot></slot>
</view>
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件slot中的内容</view>
</component-tag-name>
</view>
- 具名插槽
- 组件js
在组件的 wxml 中可以包含 slot 节点，用于承载组件使用者提供的 wxml 结构
默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: {
/* ... */ },
methods: {
/* ... */ }
})
- 此时，可以在这个组件的 wxml 中使用多个 slot ，以不同的 name 来区分。
<!-- 组件模板 -->
<view class="wrapper">
<slot name="before"></slot>
<slot name="after"></slot>
</view>
- 使用时，用 slot 属性来将节点插入到不同的 slot 上。
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</component-tag-name>
</view