2018-01-24

作者: Catch_the_tail | 来源:发表于2018-01-25 08:13 被阅读0次
  1. 小程序的组织,分成两部分,一部分是全局,一部分是页面,全局由三个文件组成,分别是app.js,app.json,app.wxss,需要放在根目录下。页面有四个文件,文件格式是js,wxml,wxss,json这四个文件微信规定了名称要相同,并且要放在同一目录下。

  2. App.json 的组成。第一个是pages,这个是字符串数组的形式,用来配置页面的组成,放在第一个的是首页,添加的加载后面,只需要写名字,不需要写后缀,这也是为什么上面规定了名字要相同,程序会根据名字自己去找相应的文件。如pages :[“pages/index/index”,”pages/index/test”]。第二个是window,这个是设置小程序的状态栏、导航栏、标题、窗口背景色。有navigationBarBackgroundColor、navigationBarTextStyle、navigationBarTitleText、backgroundColor、backgroundTextStyle、enablePullDownRefresh、onReachBottomDistance。导航栏标题颜色,仅支持 black/white,下拉背景字体、loading 图的样式,仅支持 dark/light。

    image.png
  3. TabBar属性,tabBar下面有的直接属性,color tab上的文字 的默认颜色,selectedColor文字选中时的颜色,backgroundColor tab的背景色,borderStyle ==》tabbar上边框的颜色, 仅支持 black/white。Position,位置,默认bottom,可选bottom和top, list,数组形式,里面的每个成员都是对象,成员对象的属性有,pagePath:路径页面。text,tab上的文字,iconPath,图片路径,selectedIconPath选中时的图片路径。


    image.png
  4. 超时时间,networktimeout,默认是60000毫秒。有请求,连接,上传,下载。Request、connectSocket、uploadFile、downloadFile。

  5. “debug”:true开启debug模式。

  6. Page页面的配置中也可以有.Json文件,不过这个要简单很多,只有一个字段,Window,所以可以不用写,主要是用来覆盖app.json的内容。有个页面中特有的属性,disableScroll,设置为 true 则页面整体不能上下滚动;只在 page.json 中有效,无法在 app.json 中设置该项。

  7. 逻辑层也就是js页面,有两个重要的方法, App 和 Page 方法,进行程序和页面的注册,getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。

  8. APP()函数的参数是Object,可以自己制定参数,比如传入方法。示例:App({onLaunch : function(options){方法体,全局只执行一次}})几个常用的生命周期的监视onLaunch参数、onShow参数、onHide、onError。获取实例var appInstance = getApp()。appInstance.shuxing 可以拿到定义的值。但是不要私自调用生命周期函数。

  9. setData()函数,改变this.data的值。

  10. 模块化,可以将一些公用的js代码抽离出来模块化在一个js文件中,用module.exports来暴露接口方法。比如module.exports.say = say。前面的say应该是方法名,后面的 是定义的名字。通过文件中的require(path)方法进行引入,比如var common =require(‘common.js’).然后使用时common.say进行调用。Require暂时不支持绝对路径,要用相对路径。

  11. 数据绑定,“false”表示的是字符串{{false}}才表示Boolean的值,…是扩展符,可以将对象展开,比如…object,就代表这这个对象的所有属性。或括号和引号之间如果有空格会被解析成字符串,最好不要刘空格。”{{[1,2,3]}} “这个会被解析成”{{[1,2,3]+’’}}

  12. bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡

  13. 需要在捕获阶段监听事件时,可以采用capture-bind、capture-catch关键字,后者将中断捕获阶段和取消冒泡阶段。铺货阶段在冒泡阶段之前,且捕获阶段的顺序和冒泡阶段是相反的,先执行外层,再执行点击的.

  14. <view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">

  15. <import src="item.wxml"/>引用。

  16. include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置,如:<include src=”a.wxml”/>


    image.png
  17. 可见,等号后面是方法,点后面是属性,多条属性可以采用上面那种形式。

  18. 使用@import语句导入外联样式表。分号结束,比如@import “common.Wxss”;

  19. 内联样式,静态样式统一写道class中,style中写动态样式。

  20. 定义组件Component({})还需在json文件中设置{“compponent”:true}

  21. 使用自定义组件,首先要在页面的json文件中进行声明,主要是声明自定义组件的标签名和自定义组件的文件路径。用usingComponents这个字段。如{ "usingComponents": { "component-tag-name": "path/to/the/custom/component" } }

  22. 组件指定他所在节点的默认样式,用:host{color:yellow}则在组件标签里面的文字是黄色的。
    23.做一个简单的事件点击的跳转页面操作。用到一个跳页面的wx.navigateTo({
    url: '../pageTest/pageTest',
    })这个放在方法里。
    24.定义自己的组件小测试,用开发工具建立component时候,在json文件中会自动建立{ "component": true, "usingComponents": { "huang":"./comtest" (这个是错误的) } }
    25.没有引用组件成功,是因为,要在引用组件的页面设置usingComponent,而不是在组件上写。
    26.组件引用没成功,因为失误,把组件的名字写错了。
    27.数据绑定的遍历.for循环。<view wx:for="{{[0,1,2,3,4,5]}}">{{item}}</view>
    28,语法中不能随便出现空格,比如‘a’空格,’b’就会出错。
    29.this.setData({name:’abc’})改变值的用法。字符串要记得引号。

相关文章

  • 2018-01-24

    2018-01-24 枫叶_c481 2018-01-24 13:25 · 字数 662 · 阅读 0 · 日记本...

  • 2018-01-24

    2018-01-24 汪何炯 2018-01-24 10:26 · 字数 327 · 阅读 19 · 日记本 (万...

  • webassembly 的那些事(转)

    2018-01-24 20:00作者:刘艳https://mp.weixin.qq.com/s/lFqvdBvus...

  • 2018-01-25

    “震惊”、“揭秘”、“××”…面对各种谣言伪科学,如何提升辨别能力? 原创 2018-01-24 刘sir [个人...

  • 2018-01-24

    无题 朵蓝dl 2018-01-24 10:44 · 字数 127 · 阅读 0 · 日记本 工作多年,从未...

  • 座舱电子的域控制器

    2018-01-24 周彦武 老佐 佐思汽车研究 [图片上传失败...(image-1421b9-15168614...

  • 2018-01-24

    友谊的力量 小太阳鸟 互相关注 2018-01-24 14:38 · 字数 374 · 阅读 1 · 日记本 ...

  • 悔去吧! 2018-01-24 虚拟资产投资财经 请点击上面免费订阅本账号 2014在起步, 2015在过渡...

  • es6-块级作用域绑定

    title: es6-块级作用域绑定date: 2018-01-24 21:32:33tags: es6 前言 花...

  • 2018-01-24

    2018-01-24 22:51 · 字数 317 · 阅读 5 · 日记本 【日精进打卡第27天】 宁波禾隆新材...

网友评论

    本文标题:2018-01-24

    本文链接:https://www.haomeiwen.com/subject/evumaxtx.html