小程序基础知识梳理
微信开发者工具中新建项目
教程：https://blog.csdn.net/michael_ouyang/article/details/54923784
C:\Users\Administrator\WeChatProjects\miniprogram-1
1.将test 页面加入 app.json
打开全局文件 app.json，在文件里面添加 "pages/test/test"（加入一条 test 页面所在的目录 ）
2.全局对象获取
在app.js页面中有一个globalData，这是一个全局对象。添加一个属性 info:"你好"
情况一：在非app.js文件的其他js文件中获取
通过getApp()获取全局的实例，就可以获取到全局对象内的资源
在index.wxml文件添加一个button
getApp()获取全局的对象后，就可以获取到app.js的全局属性
app.globalData.info
情况二：在当前app.js文件获取（F5刷新运行项目）：
在当前文件中获取的话，只需要使用this代表当前对象来获取就可以了
6.跳转
wx.navigateTo()和wx.redirectTo()的区别：
wx.navigateTo()是保留当前页面，跳转到某个页面，跳转页面后可以返回上一页。
wx.redirectTo()是关闭当前页面，跳转到某个页面，跳转页面后不能返回上一页。
方法一：index.wxml:
在index.wxml新建一个button组件，并使用bindtap事件绑定一个函数
index.js:在index.js中的Page函数内部，添加changeToTest 函数，函数里面使用wx.navigateTo，写上需要跳转的页面，里面传入的是一个对象，对象内使用url属性，对应的就是需要跳转的页面的路径（注意：这是接收的是一个相对路径，并且页面不需要使用.wxml后缀）
方法二：
使用API wx.redirectTo()函数（按钮同上）
方法三：
使用组件 <navigator>
跳转传参
以wx.navigateTo为例：
上面讲述,wx.navigateTo传入的url是跳转的页面（使用相对路径）
wx.navigateTo({
url:"pages/home/home"
});
那么参数传递至下一页面，则只需要在路径后面，添加？问号，？后面接的是参数，以key－value的方式。
这里传了个value为2的参数
wx.navigateTo({
url:"pages/home/home?type=2"
});
然后在home.js中的onLoad()函数中得到值：option.type就可以得到了，如下：
onLoad: function (option) {
this.setData({
type:option.type,
});
console.log(option.type);
}
7.标题栏导航栏
标题栏window
在app.json文件里面，通过window对象里面的属性进行设置
示例：
app.json：
导航
导航栏TabBar
如果我们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
Tip： 通过页面跳转（wx.navigateTo）或者页面重定向（wx.redirectTo）所到达的页面，即使它是定义在 tabBar 配置中的页面，也不会显示底部的 tab 栏。
tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
8.作用域和模块化
文件作用域
在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。
示例：
通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置，如：
/* app.js */
App({
globalData: 1
})
/* a.js */
// 这是局部变量localValue
var localValue = ‘a‘
// 获取app.js的实例
var app = getApp()
// 通过app的示例来操作全局的变量
app.globalData++
/* b.js */
// 在不同的文件中可以重复定义localValue这个变量
var localValue = ‘b‘
// 如果a.js文件先执行，那么b.js获取到的就是a.js执行过的变量数值
console.log(getApp().globalData)
模块化（require()中传入的是一个js文件的相对路径）
我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。示例：
/* common.js */
function sayHello(name) {
console.log(`Hello ${name} !`)
}
module.exports = { sayHello : sayHello}
在需要使用这些模块的文件中，使用 require(path) 将公共代码引入
/* a.js */
var common = require(‘common.js‘)
Page({
helloMINA: function() {
common.sayHello(‘MINA‘)
}
})
9.数据绑定
{{}}
10. 条件渲染(wx:if和wx:for必须分开使用)
<block wx:if="{{boolean==true}}">
<block wx:for="{{arr}}">
<view class="bg_black">内容：{{item}}</view>
</block>
</block>
<block wx:elif="{{boolean==false}}">
<view class="bg_red">无内容</view>
</block>
- 列表渲染
- 模板，引用
- 选择器
样式导入
用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
页面的顶层是节点，所以作用于整个页面的样式或修改顶层节点样式请使用page选择器。
小程序目前不支持Media Query。