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

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