小程序 第二天(基础功能,组件介绍,趟坑出来的干货)

2018-07-12  本文已影响0人  我真的很喜欢

一、 数据绑定   WXML 中的动态数据均来自对应 Page 的 data。

1.简单绑定:双大括号包裹变量,

内容  <view>{{ message }}</view>

Page({ 

     data: { message:'Hello MINA!'}

})

数据双向绑定更新UI,在请求到数据后,更新到**.js 中data里;如上面的data中message:

修改message中的值:

将event的数据写到message中,此时将自动更新到界面显示出来

组件属性&控制属性&关键字

2.运算 可以在 {{}} 内进行简单的运算

三元运算

双大括号中的三元运算

算数运算

<view>{{ 1 + 3}}</view>

逻辑判断

字符串运算

<view>{{ "asdf" + "qweqw"}}</view>

2. 页面跳转(页面路由 最好由不要打乱,由sdk中的栈来维护)

a).wx.navigateTo  打开新页面

    wx.navigateTo({ 

         uri:'page路径 路径后面可以拼接参数 e.g: ../test/test?id=1&page=2', 

         success:function(){}, 

         fail: function(){}, 

         complete: function(){}

    })

b).wx.redirectTo   页面重定向,关闭当前页面,跳转到非tabBar的某个页面

c).使用Navigator组件点击跳转d).wx.switchTabwx.switchTab({ url:'../test/test',})

3.  页面数据

**page.js 中存储页面数据,

在页面中存储

页面中存储数据

页面跳转数据传递        PageA   跳转到  PageB

PageA:

传递数据:?paramName='adfa'

PageB:

PageB中onLoad 获取参数

全局数据存储     以键值对的方式(key  --  value)

        wx.setStorage,    wx.getStorage

        wx.setStorageSync,  wx.getStorageSync

        wx.setStorageInfo,   wx.getStroageInfo

        wx.setStorageInfoSync,  wx.getStorageInfoSync

        wx.removeStorage, wx.removeStorageSync

        wx.clearStorage,   wx.clearStorageSync

布局文件传递数据到js文件:

布局文件中 点击事件中,获取布局文件中配置的参数

4.首页TabBar

首页tabBar设置(app.json)

如上代码截图,workspace 页面必须在Page声明中放在第一的位置,否则将无法显示tabBar

5. 布局(flex)

布局文件 排版样式文件 呈现效果

6. 修改头部颜色 和 文字

在onLoad中调用    

wx.setNavigationBarTitle({

    title:"title info",   // 标题文字

});

wx.setNavigationBarColor({

    frontColor:'#ffffff',   // 文字颜色

    backgroundColor:"#1e77eb",  // 背景颜色

});

7. 组件    参考文档

https://developers.weixin.qq.com/miniprogram/dev/component/

8. 分享 后的提示  “已转发”  文案暂时无法修改

9. 数据保存 传递(Page之间,全局等)

    全局读写  读写存储器上的数据  setStorage/getStorage;  setStorageSync/getStorageSync;    

    全局读写  存储在App.js中,通过获取App对象来读写;

        读: var code = getApp().param; 

        写:getApp().param = code;

10. 非数据绑定的更新界面 & 动态添加节点 & 动态修改样式等

View的动态添加效果实现 的 取巧方式:View一直存在,只是通过控制其显示和隐藏来实现视觉上的动态添加删除方法。暂无append方法来实现真正意义上的动态添加。

条件渲染来实现隐藏显示示例:

isShow定义在Data中

修改组件样式     只能通过数据绑定来实现,无法通过DOM来操作组件(元素)

e.g.  定义两个样式(wxss)中,wxml布局中做有判断条件:

serviceSelection响应中修改isChecked的值,方式参考 1 ;is_checked 和 normal分别为两种样式

后续持续修改更新中

上一篇下一篇

猜你喜欢

热点阅读