微信小程序速查知识

{
 // 文件描述
 "description": "项目配置文件",
 // 项目代码配置
 "setting": {
 // 是否检查 url 域名安全性和 TLS 版本
 "urlCheck": false,
 // 是否将项目的 es5 代码转成 es6
 "es6": true,
 // 是否自动补全 css 兼容前缀
 "postcss": true,
 // 是否压缩代码
 "minified": true,
 // 是否启用新功能
 "newFeature": true
 },
 // 编译方式
 "compileType": "miniprogram",
 // 版本号
 "libVersion": "1.7.2",
 // appid
 "appid": "touristappid",
 // 项目名
 "projectname": "haiyangbg",
 // 项目配置
 "condition": {
 // 搜索关键字
 "search": {
  "current": -1,
  "list": []
 },
 // 客服
 "conversation": {
  "current": -1,
  "list": []
 },
 // 编译方式
 "miniprogram": {
  "current": -1,
  "list": []
 }
 }
}

{
 // 项目路由设置（第一项为首页）
 "pages":[
 "pages/index/index",
 "pages/logs/logs"
 ],
 // 窗口设置
 "window":{
 // 顶部导航栏背景色，必须是十六进制颜色值，如"#000000"
 "navigationBarBackgroundColor": "#9ef468",
 // 顶部导航栏显示文字
 "navigationBarTitleText": "组件展示",
 // 导航栏文字颜色，仅支持 black/white
 "navigationBarTextStyle": "black",
 // 下拉背景的文字样式，仅支持 dark/light
 "backgroundTextStyle":"light",
 // 下拉背景色，必须是十六进制颜色值，如"#000000"
 "backgroundColor": "#333",
 // 是否开启下拉刷新
 "enablePullDownRefresh": true,
 // 距离最底端触多少距离时触发触底事件，单位px
 "onReachBottomDistance": 40
 },
 //网络请求过期时间，单位毫秒
 "networkTimeout": {
 // 普通ajax请求
 "request": 20000,
 // Socket请求
 "connectSocket": 20000,
 // 文件上传
 "uploadFile": 20000,
 // 文件下载
 "downloadFile": 20000
 },
 // tab导航栏
 "tabBar": {
 // 文字的颜色
 "color": "#999",
 // 选中时文字的颜色
 "selectedColor": "#000",
 // 背景色
 "backgroundColor": "#fff",
 // 上边框的颜色，仅支持 black/white
 "borderStyle": "black",
 // tab导航栏显示在底部还是顶部(顶部不显示图片)
 "position": "bottom",
 // 导航栏列表项
 "list": [{
 // 导航到的页面路径
 "pagePath": "pages/index/index",
 // tab按钮上的文字
 "text": "组件",
 // 图片路径
 "iconPath": "img/com-l.png",
 // 选中后显示的图片
 "selectedIconPath": "img/com-d.png"
 },{
 "pagePath": "pages/logs/logs",
 "text": "API",
 "iconPath": "img/api-l.png",
 "selectedIconPath": "img/api-d.png"
 }]
 },
 // 调试信息
 "debug": true
}

// 源码（需要和调用的页面在同一个wxml里）
<template name="template">
 <view>
 I am {{ name }} 
 </view>
</template>

// 调用
<template is="template" data="{{...message}}"/>

// js 数据
Page({
 data: {
 message: {
 name: '海洋饼干'
 }
 }
})

// template.wxml
<template name="template">
 <view>
 I am {{ name }} 
 </view>
</template>

// page.wxml 调用
<import src ="../template/template.wxml"/>
<template is="template" data="{{...message}}"/>

// js 数据
Page({
 data: {
 message: {
 name: '海洋饼干'
 }
 }
})

 1. 单 solt 
 "
 // component
 <view>
 <slot></slot>
 </view>
 
 // page ( hybg 是上面的组件标签名)
 <hybg>
 <view> page 的 slot </view>
 </hybg>
 
 // 效果
 <view>
 <view> page 的 slot </view>
 </view>
 
 "
 2. 多slot
 "
 // 先在 Component 的 js 中添加
 options: {
 // 启用多slot
 multipleSlots: true
 },
 // 多 slot 需要使用不同的 name 来区分
 <view>
 <slot name="first"></slot>
 <slot name="last"></slot>
 </view>
 
 // page ( hybg 是上面的组件标签名)
 <hybg>
 <view slot="first"> first -- slot </view>
 <view slot="last"> last-- slot </view>
 </hybg>
 
 // 效果
 <view>
 <view slot="first"> first -- slot </view>
 <view slot="last"> last-- slot </view>
 </view>
 
 "

// page
fatherEvent: function(e){
 console.log(e.detail) // 组件传递的自定义信息
 }
<hybg bindhybgEvent="fatherEvent"></hybg>

 // component
 tap: function(){
 var myEventDetail = { a: 10} // detail对象，提供给事件监听函数
 var myEventOption = {} // 触发事件的配置选项
 // bubbles 事件是否冒泡
 // capturePhase 事件是否拥有捕获阶段
 // composed 是否可以穿越父组件边界
 this.triggerEvent('hybgEvent', myEventDetail, myEventOption)
}

 <view bindtap="tap">触发 hybgEvent 事件</view>