一、入门
1.app.js
app.js 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA提供的丰富的 API，如本例的同步存储及同步读取本地数据。
2.app.json
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口 背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。
eg:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
// 注意：pages/index/index 最后的index，就包含了index.js index.wxml index.wxss三个文件
3.index.js
index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。
4..wxss
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss中指定的样式规则
- .json
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖app.json的window中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用app.json中的默认配置。
6..wxml
布局文件
<!-- logs.wxml -->
<view class="container log-list">
</view>
二、生命周期：
在index.js里面：
生命周期是：App Launch -> App Show -> onload -> onShow -> onReady
1)整个app的启动与现实。app的启动在app.js中可配置。
2)进入各个页面的加载显示等。（这里，loading的指示器显示等）。
3)界面跳转：
a)wx.navigateTo(OBJECT):保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
b)wx.redirectTo(OBJECT):关闭当前页面，跳转到应用内的某个页面。
c)wx.nacigateBack():当前页面关闭，回退到前一页面。
三、八大组件
这里可以参考官方文档，比较全面。
四、外部框架
原生的js插件和外部框架都不能使用，因为他们几乎都是操作DOM的内容，而微信应用号不允许操作任何DOM。动态设置的rem.js也不能支持。
五、WebSocket
微信提供WebSocket让我们可以做即时聊天，十分方便。
六、tabBar
*注意：微信的底部菜单最多支持五栏（五个 icons）
tabBar的text属性可以去掉，而且没有text属性的时候，tabBar高度会降低。
七、知识点
1）*注意：wechat开发工具并不完善，每次编辑了哪个页面，必须ctrl + s：保存一下.
2）F5是刷新页面，可以刷新测试的demo界面
*注意：修改wxml和wxss下的内容后，直接 F5 刷新就能直接看到效果，修改js则需点击重启按钮才能看到效果。
3）建议在subline或者webStorm下开发微信小程序
4）基于微信开发工具并不人性化目前，建议在新建页面的时候，首先在app.json的pages中先添加："pages/index/index"，再新建一个wxml文件的同时，把对应的js和wxss文件一起新建好，因为微信应用号的配置特点就是解析到一个wxml文件时，会同时在同级目录下找到同文件名的js和wxss文件.
5）相对于html的<div>，在小程序中使用<view>
6）使用class名来设置样式，id名在这里基本没有什么用处。原因是主要操作数据，不操作dom。
7）wxss文件是引入的样式文件，可以直接在里面写样式，但是不推荐
eg:
@import "wxss/index.css";
body{
background:pink;
}
8)app.json中 window是配置顶部的一些样式
tabBar 是配置底部的配置
9)window作用：
用于设置小程序的状态栏，导航栏，标题，窗口背景色。// 窗口指的是页面的back
*注：在app.json中配置的属性会被子window的属性所覆盖。
属性有：
"navigationBarBackgroundColor":"#666666"
"navigationBarTextStyle":"white" // 注意：这里仅支持white/black/light
"navigationBarTitleText":"微信demo" // 导航栏标题文字
"bacgroundColor":"#333333" // 窗口的背景色
"backgroundTextStyle":"dark" // 下拉背景字体，loading图的杨啊是，仅仅支持 dark/light
"enablePullDownRefresh":"false" // 是否开启下拉刷新
10).js文件主要作用逻辑，和生命周期函数处理
11）小程序中的导入：
a).js => require
b).wxss => import
12)在css中display属性作用
eg:
{
display:none; // 不显示
display:block; // 此元素将显示为块级元素，此元素前后会带有换行符
display:inline; // 默认。此元素会被显示为内联元素，元素前后没有换行符。
display:inline-block; // 行内块元素
....... // 参考 [display解释](http://www.w3school.com.cn/cssref/pr_class_display.asp)
}
在微信小程序中：
`display:flex;` // 参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 作用是 `flex `是` flexiable box` 用于移动布局。 为盒状模型提供了最大的灵活性。任何一个容器都能够制定为Flex布局。
webkit内核的浏览器：safari是一个
*注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
13)rpx单位介绍：
微信小程序中的css尺寸单位，rpx可以根据屏幕宽度进行自适应。规定的屏幕宽度为750rpx.
参考： http://www.51xuediannao.com/javascript/xiaochengxu_rpx.html
14） indicator-dots = "{{indicatorDots}}" 为何用{{}}包裹
<swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}">
解释：绑定的数据。也可以说是一种MVVM的模板语法。VUE AN基本都是这么干的。语法格式。应该是框架加进去的自定义属性，{}看框架咋定义，有些事function，有些是参数。标签里面遇到像data,ng-model, indicator-dots这样的属性，一般都是框架加进去的。
15）Page()函数用来注册一个页面。接受一个object参数。其指定页面的初始数据，生命周期函数，时间处理函数等。
Page（）相当于一个构造函数。
Page({
data:{
indicatorDots:true,
vertical:false,
autoplay:true,
interval:3000
},
// 时间处理函数
swiperchange:function(e){
// contents
}
})
-
js中var that = this;的解释
this对象在程序中随时会改变，而var that=this之后，that没改变之前仍然是指向当时的this，这样就不会出现找不到原来的对象
17)App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。
前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。
只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。
App.prototype.getCurrentPage()
getCurrentPage()函数用户获取当前页面的实例。
var app = getApp(); 微信提供了全局的 getApp() 函数，可以获取到小程序实例。
不要在定义于 App()内的函数中调用 getApp() ，使用 this就可以拿到 app 实例。
不要在onLaunch的时候调用 getCurrentPage()，此时 page 还没有生成。
通过 getApp() 获取实例之后，不要私自调用生命周期函数。
实用经验，自己出错过的
- bindtap 不能写为：bindTap
给view绑定事件的时候
2.Page中的2个方法中， 需要用,隔开:
Page({
onLoad: function () {
console.log('onLoad-search')
},
// 返回前一页
navigateBack: function(e) {
console.log("back");
}
})
3.设置都是 :, 不是=:
// 清除
clearText: function(e) {
this.setData({
input_str:"" // 之前是=就会报错
})
},
display:none 与 display:block 相对应后者会显示
5.主要原则：
不是改变父元素，是改变item对应的数据变量。
6.事件：
Page({
bindViewTap:function(event){
event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
event.target.dataset.alphabeta === 2 // 大写会转为小写
}
})
- 微信小程序判断
wx-if="{{index==0}}"
8.当前target
console.log(e.currentTarget);
9.表达式
{{}} 里面不能嵌套 {} 或者 {{}} ， 里面自然会使用变量
{{ dic-index }} // 如果index 变量为1. 结果就为dic-1
网友评论