微信开发者工具中新建项目
教程: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。