一、入门
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中指定的样式规则5.json
页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。6.wxml
布局文件<!-- logs.wxml -->
<view class="container log-list">
</view>
二、生命周期:
1.在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
}
})
16) 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() 获取实例之后,不要私自调用生命周期函数。
八、实用经验,自己出错过的
1、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:"" // 之前是=就会报错
})
},
4.
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