微信小程序的学习（2018.4.18）

微信小程序学习

页面跳转的两种方式：

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}

    ],  

---

留言板的实现

留言的添加 删除 修改