1.公众平台申请账号：
你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。 在设置”-“开发设置” 可以看到小程序的 AppID ,在本地开发新建项目时必须输入自己账号的AppID
2.安装开发者工具
登录后新建项目时，需输入申请的小程序的 AppID(相当于一个身份证，很多地方需要用到)
勾选 "创建 QuickStart 项目" (注意: 你要选择一个空的目录才会有这个选项)
3.项目里边生成了不同类型的文件:
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
1.JSON 配置
QuickStart 项目里边的 app.json 配置内容如下： pages String Array 是 设置页面路径
window Object 否 设置默认页面的窗口表现
tabBar Object 否 设置底部 tab 的表现
networkTimeout Object 否 设置网络超时时间
debug Boolean 否 设置是否开启 debug 模式
复制代码pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。
1.app.json 配置项列表
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "demo1",
"navigationBarTextStyle":"black"
}
}
复制代码pages
数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改，只有在此声明才能创建页面
在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。
文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如"#000000"
navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
navigationStyle String default 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮 微信版本 6.6.0
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字体、loading 图的样式，仅支持 dark/light
backgroundColorTop String #ffffff 顶部窗口的背景色，仅 iOS 支持 微信版本 6.5.16
backgroundColorBottom String #ffffff 底部窗口的背景色，仅 iOS 支持 微信版本 6.5.16
enablePullDownRefresh Boolean false 是否开启下拉刷新，详见页面相关事件处理函数
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位为px
复制代码tabBar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面
当==设置 position 为 top 时，将不会显示 icon== tabBar 中的 ==list 是一个数组==，只能配置==最少2个、最多5个== tab，tab 按数组的顺序排序。
color HexColor 是 tab 上的文字默认颜色
selectedColor HexColor 是 tab 上的文字选中时的颜色
backgroundColor HexColor 是 tab 的背景色
borderStyle String 否 black tabbar上边框的颜色， 仅支持 black/white
list Array 是 tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position String 否 bottom 可选值 bottom、top
复制代码list 接受一个数组，数组中的每个项都是一个对象
pagePath String 是
页面路径，必须在 pages 中先定义
text String 是 tab 上按钮文字
iconPath String 否
图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
selectedIconPath String 否
选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
复制代码networkTimeout
可以设置各种网络请求的超时时间。
request Number 否
wx.request的超时时间，单位毫秒，默认为：60000
connectSocket Number 否
wx.connectSocket的超时时间，单位毫秒，默认为：60000
uploadFile Number 否
wx.uploadFile的超时时间，单位毫秒，默认为：60000
downloadFile Number 否
wx.downloadFile的超时时间，单位毫秒，默认为：60000
复制代码debug
可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。
各个页面也可以配置.json，但只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键。会覆盖全局的app.json的设置样式
{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#ccc",
"navigationBarTitleText": "用户中心"
}
复制代码每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。 ==页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键==
2.WXML 模板
WXML 充当的就是类似 HTML 的角色
MVVM 的开发模式， 不再让 JS 直接操控 DOM，JS只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
复制代码小程序的 WXML 用的标签是 view, button, text 等等
{{ }} 的语法把一个变量绑定到界面上，需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。
<button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
复制代码列表渲染
<view wx:for="{{array}}"> {{item}} </view>
复制代码条件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
复制代码模板
<!--wxml-->
<template name="staffName">
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
复制代码事件 {{count}}
Page({
data: {
count: 1
},
add: function(e) {
this.setData({
count: this.data.count + 1
})
}
})
复制代码组件属性(需要在双引号之内)
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
<view wx:if="{{condition}}"> </view>
<checkbox checked="{{false}}"> </checkbox>
特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。
<view hidden="{{flag ? true : false}}"> Hidden </view>
<view>{{"hello" + name}}</view>
<view>{{object.key}} {{array[0]}}</view>
复制代码数组
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
data: {
zero: 0
}
})
最终组合成数组[0, 1, 2, 3, 4]
复制代码对象
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
a:1,b:2
{for: 1, bar: 2}
<template is="objectCombine" data="{{foo, bar}}"></template>
foo: 'my-foo',
bar: 'my-bar'
{foo: 'my-foo', bar:'my-bar'}
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
obj1:{
a:1,b:2
}
复制代码列表渲染 wx:for
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
array: [{
message: 'foo',
}, {
message: 'bar'
}]
复制代码{{idx}}: {{itemName.message}}
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
复制代码wx:key
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
objectArray: [
{id: 5, unique: 'unique_5'},
{id: 4, unique: 'unique_4'}
],
复制代码条件渲染 wx:if
wx:elif 和 wx:else 来添加一个 else 块
当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染
hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。 如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
复制代码block wx:if
并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
复制代码模板
1.定义模板
使用 name 属性，作为模板的名字
2.使用模板
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：
<template is="msgItem" data="{{...item}}"/>
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
复制代码3.模板的作用域
模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 模块。
事件
什么是事件
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches
复制代码1.事件的使用方式 在组件中绑定一个事件处理函数。
事件绑定和冒泡
key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、、catch:touchstart。
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
事件的捕获阶段
捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。
在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
outer view
<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view
</view>
</view>
复制代码事件对象
当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象
BaseEvent 基础事件对象属性列表：
属性 类型 说明
type String 事件类型
timeStamp Integer 事件生成时的时间戳
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
复制代码CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：
detail Object 额外的信息式
复制代码TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：
属性 类型 说明
touches Array 触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件，当前变化的触摸点信息的数组
TouchEvent 触摸事件对象属性列表（继承 BaseEvent）
复制代码引用
WXML 提供两种文件引用方式import和include。
在 item.wxml 中定义了一个叫item的template：
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
复制代码在 index.wxml 中引用了 item.wxml，就可以使用item模板：====
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
复制代码import 的作用域
C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template
include（相当于组件的引用） include 可以将目标文件除了 template,wxs标签外的整个代码引入，相当于是拷贝到 include 位置，如：
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
复制代码3.WXSS 样式
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
WXSS 扩展的特性有
尺寸单位
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径
内联样式
<view style="color:{{color}};" />
复制代码style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
选择器
::after view::after 在 view 组件后边插入内容
::before view::before 在 view 组件前边插入内容
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
4.JS 交互逻辑
一个服务仅仅只有界面展示是不够的，还需要和用户做交互：微信小程序通过编写 JS 脚本文件来处理用户的操作。
<button bindtap="clickMe">点击我</button>
复制代码如上，为button绑定用户点击事件，就是在js文件中完成的。 js文件中用Page() 函数用来注册一个页面，接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
我们可以在 JS 中调用小程序提供的丰富的 API。 page中的函数有： onLoad 生命周期函数--监听页面加载
onReady 生命周期函数--监听页面初次渲染完成
onShow 生命周期函数--监听页面显示
onHide 生命周期函数--监听页面隐藏
onUnload 生命周期函数--监听页面卸载
onPullDownRefresh 页面相关事件处理函数--监听用户下拉动作
onReachBottom 页面上拉触底事件的处理函数
onShareAppMessage 用户点击右上角转发
onPageScroll 页面滚动触发事件的处理函数
onTabItemTap 当前是 tab 页时，点击 tab 时触发
1614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
