一个基本介绍
微信专门为小程序开发了一个名为微信开发人员工具的思想
微信开发人员工具的最新版本集成了微信官方帐户的调试和开发工作，使您可以更改开发模式。
不选择appid，可以不使用appid进行开发，但是无法预览；
两个基本架构和配置文件
1.小程序架构
小程序主要由两部分组成，主要部分（应用程序）和每个页面（页面）。
类似于许多框架，主要部分主要用于核心配置，并且每个页面主要用于不同的业务场景。
app是小程序的框架。支持页面，调用逻辑层，分析数据，wxss，wxml；
页面（主要是业务层）用于实现基于接口的操作功能，并且是程序员最常使用的部分。
1.1，主要部分主要由3个文件组成
这三个应用文件是app.js，app.json和app.wxss。
app.js文件是一个脚本文件，用于处理一些常见或全局逻辑。例如，在此处定义全局变量以处理登录逻辑以指定主页等。
app.json文件是小程序的整体配置文件。我们必须在此文件中配置组成小程序页的页面，还可以在此文件中配置整个小程序的统一窗口背景色，导航栏样式和默认标题。但必须注意，不能在此文件中添加任何注释。
app.wxss文件是整个小程序的公共样式表。我们可以直接在小程序子页面组件的class属性上使用app.wxss中声明的样式规则。换句话说，此文件中定义的样式可以在任何其他子页面中使用。这也是为了简化代码和整体样式的统一性。
1.2，该页面由4个文件组成
小程序的所有显示的页面必须以子文件夹（包括主页）的形式存储在pages文件夹中。项目显示多少页，需要在pages文件夹下创建多少个子文件夹。每个页面的子文件夹必须包含以下四个文件：* .js，*。wxml，*。wxss和* .json（*表示文件名）。这四个文件的文件名必须与子文件夹的名称相同。
*。js文件是当前页面的脚本文件和业务逻辑的处理文件。当前页面与后端服务器接口之间的所有交互以及请求数据的逻辑均在此文件中完成。这是核心文件，必须创建。
*。wxml文件是构建当前页面元素的文件。负责构建当前页面的结构和布局，等效于Web开发中的* .html文件。该文件存储一些与p跨度表单输入节类似的布局代码，必须创建。
*。wxss文件是当前页面的样式文件。负责调整当前页面的样式，元素之间的间距，字体的大小，字体的颜色，背景图像等，这些等效于在需要时创建的Web开发中的css文件。
*。json文件是当前页面的配置文件。配置当前页面的窗口背景颜色，导航栏样式，默认标题等。
1）app.js：小程序逻辑，初始化APP
2）app.json：小程序配置，例如导航，窗口，页面http请求重定向等。
3）app.wxss：通用样式配置
完成主要配置后，将开发相应的业务，这是开发人员最常操作的页面。 小程序页面设计基本上遵循MVC结构。
1）js：页面逻辑，等效于控制层（C）；还包括部分数据（M）
2）wxml：页面结构显示，等同于视图层（V）
3）wxss：页面样式表，纯前端，用于辅助wxml显示
4）json：页面配置，配置页面上显示的一些数据，并作为模型（M）的一部分
App.js
用于注册小程序。在启动小程序并创建小程序直到销毁它之前调用。它存在于小程序的整个生命周期中。显然，它是单例的，是全局的。所以，
1）只能在app.js中注册一次。
2）可以通过getApp（）在代码中的任意位置获取此唯一的小程序单例，
例如，var app = getApp（）;
App（）的参数是对象类型{}，它指定小程序的生命周期函数。
onLaunch功能
显示器小程序已初始化。
小程序的初始化完成后，将触发onLaunch（全局仅一次）。
onShow功能
显示器小程序显示。
小程序启动或从背景进入前景显示时，它将触发。
onHide功能
显示器小程序隐藏。
小程序从前景进入背景时，它将触发。
所谓的前端和后端的定义类似于手机上的应用程序。例如，当不使用微信时，它将进入后端。
App.json
接受一个数组，每个项目都是一个字符串，以指定小程序由哪些页面组成
“页面”：[
“页面/索引/索引”
“页面/结果/结果”
“页面/历史/历史”
]，
窗口
用于设置小程序的状态栏，导航栏，标题，窗口背景颜色。
“窗口”：{
“ backgroundTextStyle”：“浅色”，
“ navigationBarBackgroundColor”：“＃d13f49”，
“ navigationBarTitleText”：“名称度量”，
“ navigationBarTextStyle”：“＃7f8389”
}，
tabBar
通过tabBar配置项指定选项卡栏的性能，并在切换选项卡时显示相应的页面。
tabBar配置数组，只能配置至少2个选项卡和最多5个选项卡。这些选项卡按数组顺序排序。
“ tabBar”：{
“颜色”：“＃7f8389”，
“ selectedColor”：“＃d13d3d”，
“ borderStyle”：“白色”，
“ backgroundColor”：“＃fff”，
“列表”：[
{
“ pagePath”：“页面/索引/索引”，
“文字”：“名称度量”，
“ iconPath”：“ image / ico 1.png”，
“ selectedIconPath”：“ image / h_ico 1.png”
}，
{
“ pagePath”：“页面/历史/历史”，
“文本”：“测量历史”，
“ iconPath”：“ image / ico2.png”，
“ selectedIconPath”：“ image / h_ico2.png”
}
]
}，
networkTimeout
您可以设置各种网络请求的超时时间。
“ networkTimeout”：{
“请求”：180000
}
}
三个视图预渲染
组件，小程序开发人员文档
弹性方向：行
1
2
3
弹性方向：列
1
2
3
按钮
默认
四个数据绑定
2.1数据绑定
{{消息}}
数据：{
消息：“你好，世界！”
}
2.2事件（小程序无法操作dom）
{{btntext}}
BtnClick：function（）{
console.log（“按钮被单击了〜”）
}
2.3动态修改内容（对于数据修改，只能使用setData（）
{{btntext}}
{{text}}
数据：{
text：“这里是文本”
}
BtnClick：function（）{
console.log（“按钮被单击了〜”）
this.setData（{text：“这是新内容〜”}）
}
2.4个渲染标签
{{text}}
或者
{{btntext}}
{{text}}
data:{
show:false
}
动态改变这个值
btnClick：function(){
var isShow = this.data.show;
console.log( “isShow:”+isShow)
this.setData({text:“这是改变后的内容…”，show:!isShow})
}
{{text}}1
{{text}}2
2.4循环
{{index}}-{{item}}
data:{
news: [‘aaa’,‘bbb’,‘ccc’]
}
自己定义
{{ix}}-{{items}}
动态修改数组的值
数据：{
news: [‘aaa’,‘bbb’,‘ccc’]
}
btnClick：function(){
var newsdata = this.data.news;
newsdata.shift()
this.setData({news:newsdata})
}
模板
1.例如，头
header.html
这是头
简介
等同于复制所有内容
2.例如脚
foot.html
这是最低的1
这是底部2
简介
等同于介绍部分模块内容
五个生命周期
当用户第一次打开小程序时，会触发onLaunch（全局仅触发一次）。
小程序初始化完成后，触发onShow方法，监听小程序显示。
小程序从前台进入后台，触发 onHide方法。
小程序从后台进入前台显示，触发 onShow方法。
小程序后台运行一定时间，或系统资源占用过高，会被销毁。
示例代码：
App({
onLaunch: function() {
// Do something initial when launch.
},
onShow: function() {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
ｏｎｅｒｒｏｒ: function(msg) {
console.log(msg)
},
globalData: 'I am global data'
})
小程序提供了一个全局的getApp（）函数，该函数可以获取小程序个实例。
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
总结：
onLoad: 页面加载。
1)一个页面只会调用一次。
2)参数可以获取wx.navigateTo和wx.redirectTo及中的 query。
onShow: 页面显示
1)每次打开页面都会调用一次。
onReady: 页面初次渲染完成
1)一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
2)对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
onHide: 页面隐藏
1)当navigateTo或底部tab切换时调用。
onUnload: 页面卸载
1)当redirectTo或navigateBack的时候调用。
六种微信小程序三种跳页方式
为了不让用户在使用小程序时造成困扰，微信小程序规定页面路径只能是五层，请尽量避免多层级的交互方式。
页面跳转的话就涉及到了多个页面层级
跳转到新页面
pen-type =“ navigate”等同于API的wx.navigateTo，而wx.navigateTo的网址是应用程序中需要重定向的non-tabBar页面的路径
保留当前页面，跳至应用程序中的特定页面，使用wx.navigateBack返回原始页面。
在当前页面上打开
open-type =“ redirect”等同于API的wx.redirectTo，而wx.redirectTo的网址是应用程序中需要重定向的non-tabBar页面的路径。
切换到首页标签
open-type =“ switchTab”等同于API的wx.switchTab，并且wx.switchTab的网址需要跳转到tabBar页面并关闭所有其他非tabBar页面
七个微信小程序传输数据
1.使用本地缓存的方法保存全局变量,本地缓存是有存储限制的，所以建议手动删除不再需要的缓存数据。
假如在A页面保存需要的信息,如下图就可以直接保存键名为cargo的数据。
var cargo={
id:'12345',
count:2,
name:'xx书籍',
price:85,
picUrl:'http://image/kiwis.com/gfdscvbwerdcdgqd.jpg'
};
wx.setStorage({
key:"cargo",
data:cargo
})
在B页面直接可以使用小程序的wx.getStorage并传入要获取到的键值名就可以获取本地缓存的数据。
wx.getStorage({
key: 'cargo',
success: function(res) {
console.log(res.data)
}
})
2.通过在跳转、重定向等转变页面时候，可以直接通过url来传送数据。
在A页面传递数据到B页面中使用的时候可以直接使用以下数据。
//page A
wx.navigateTo({
url: 'test?id=1'
})
//or page A
wx.redirectTo({
url: 'test?id=1&title=“标题”'
})
//page B
Page({
onLoad: function(options){
console.log(options.id)
console.log(options.title)
}
})
八微信小程序个共享
在页面的js文件中定义onShareAppMessage函数时，该页面可以指示可以转发更改的页面。您可以在功能中设置页面转发信息。
仅在定义此功能后，小程序右上角的菜单中才会有一个前进按钮。当用户单击前进按钮时，将调用此函数。此函数需要返回一个对象，其中包含转发的信息（可自定义的转发内容）
onShareAppMessage: function( options ){
var that = this;
// 设置菜单中的转发按钮触发转发事件时的转发内容
var shareObj = {
title: "转发的标题", // 默认是小程序的名称(可以写slogan等)
path: '/pages/share/share', // 默认是当前页面，必须是以‘/’开头的完整路径
imgUrl: '', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
success: function(res){
// 转发成功之后的回调
if(res.errMsg == 'shareAppMessage:ok'){
}
},
fail: function(){
// 转发失败之后的回调
if(res.errMsg == 'shareAppMessage:fail cancel'){
// 用户取消转发
}else if(res.errMsg == 'shareAppMessage:fail'){
// 转发失败，其中 detail message 为详细失败信息
}
},
complete: fucntion(){
// 转发结束之后的回调（转发成不成功都会执行）
}
};
// 来自页面内的按钮的转发
if( options.from == 'button' ){
var eData = options.target.dataset;
console.log( eData.name ); // shareBtn
}
通过给 button 组件设置属性 open-type="share"，可以在用户点击按钮后触发 Page.onShareAppMessage() 事件，如果当前页面没有定义此事件，则点击后无效果。
兼容性写法：
Page({
数据：{
canIUse：wx.canIUse（'button.open-type.share'）
}
}）
分享给朋友
数据：{
canIUse：wx.canIUse（'button.open-type.share'），
}
客户服务
客户服务留言
数据：{
canIUse：wx.canIUse（'button.open-type。contact'），
}
2.推荐的网站：小程序社区