微信小程序学习
页面跳转的两种方式：
a).新闻跳转
b).在微信里面alert没法用，带window的都不可以用
index.wxml
跳转到新闻界面
index.js
aaa(){
console.log(111)
wx.navigateTo({
url: '../news/news',
})
添加事件
bindtap
wx的全局对象
css的修改：
跳转到新闻界面
.nav-text
{
color: blue;
font-size:40px;
}
点击改变数据
点击改变数据
changeMotto(){
console.log(this.data.motto);
//this.data.motto='aa';
this.setData(
{
motto:'aaa'+Date.now()
}
);
},
App() ->注册一个小程序
onLaunch 生命周期
page()->注册小程序的页面
getApp
app里面定义的东西可以通过getapp拿到
json配置当前页面的内容：
模块化：
导出模块：
Module.exports.x=x
Exports.x=x
Module.exports={};
使用：
Letco=require()
使用案例：
Common.js
functionechoHello(user){
//return '欢迎用户:{{user}}回来';
return '欢迎用户'+user+'回来';
}
functionechoBye(user) {
// return '${user}已经退出，欢迎下次再来！';
return user + '已经退出，欢迎下次再来！';
}
//导入
module.exports.echoHello=echoHello;
exports.echoBye=echoBye;
news.js 中调用
var com=require('../../utils/common');
// pages/news/news.js
varapp=getApp();
console.log(app);
var com=require('../../utils/common');
Page({
/**
*页面的初始数据
*/
data: {
msg:"默认数据"
},
fnUserState() {
this.setData({
msg: com.echoHello('Alex')
});
},
fnUserState2() {
this.setData({
msg: com.echoBye('Alex')
});
},
change(){
this.setData({
msg:app.a
});
},
News.wxml 界面的使用
{{msg}}\n
回来
退出
对元素隐藏的操作
切换
设置view 的样式
.box{
}
.items{
width: 50px;
height: 80px;
float: right;
border: 2px dashed #000;
background: red;
}
在js中编写函数
bShow:true,
changes(){
this.setData({
bShow:!this.data.bShow
});
},
循环输出的操作
页面端的定义{{item}} {{index}}这是标准定义
{{item}} {{index}}
{{item.name}}
{{item.age}} {{index}}
样式的编写
.listView{
}
.li{
border-bottom: 1px dashed #000;
height: 40px;
line-height: 30px;
}
Js中对数组的定义
arr:['apple','banana','arange'],
arrData:[
{name:'apple',age:10},
{name:'banana', age: 10},
{name:'orange', age: 10}
],
留言板的实现
留言的添加 删除 修改
网友评论