微信小程序学习笔记(一)

1.目录及文件构成

1.1 根目录下

  ** app.js 是小程序的脚本代码,用来监听并处理小程序的生命周期函数、声明全局变量。

  ** app.json 是对整个小程序的全局配置,配置小程序是由哪些页面组成,配置小程序的窗口背景颜色等。

  ** app.wxss 是整个小程序的公共样式表。

  其中 app.js 和 app.json 是必需的。


1.2 小程序页面是由同路径下同名但不同后缀的2 ~ 4个文件组成:

   ** .js后缀的文件是页面脚本文件,该文件实现页面逻辑与事件处理

  ** .json后缀的文件是页面配置文件。

  ** .wxss后缀的是页面样式表文件。

  ** .wxml后缀的文件是页面结构文件,该文件与.wxss文件一起构建出页面。

  其中 .js 和 .wxml文件是必需的。

 

2. 每个小程序包含一个描述整体程序的app实例和多个描述页面的page


  * 其中app由三个文件构成:
    ** 公共配置 app.json
    ** 公共样式 app.wxss
    ** 主体逻辑 app.js

  * 每个page最多由四个文件构成
    ** 页面配置 page.json
    ** 页面样式 page.wxss
    ** 页面结构 page.wxml
    ** 页面主体逻辑 page.js

  我们可以按需在app.js和page.js中添加程序在生命周期的每个阶段相应的事件。
  比如在页面onLoad的时候进行数据加载,onShow的时候进行数据的更新


  *** 怎么写js文件(注意:里面的涉及的实例都是js实例)

    * app.js首先写app构造方法,即App()
    这个构造方法里面的参数是一个js实例,即App({})
    参数实例里面有生命周期函数还有全局变量

    * page.js首先写page构造方法,即Page()
    这个构造方法里面的参数是一个js实例,即Page({})
    参数实例里面有data属性、生命周期函数、自定义的事件处理函数
    data属性的属性值也是一个js实例,即data:{}
    属性值实例里面也有属性和属性值,如data:{name:"wang",age:26}

 

  典型的app.js代码如下

  App({
      onLaunch:function(){
        //启动时执行的初始化工作
      },

      onShow:function(){
        //小程序启动或从后台进入前台时,触发执行的操作
      },

      onHide:function(){
        //小程序从前台进入后台时,触发执行的操作
      }

  })


  典型的一个页面page.js代码如下
  Page({
      date:{
        text:‘This is page data‘
      },

      onLoad:function(){
        //页面加载时执行的初始化工作
      },

      onReady:function(){
        //页面就绪后触发执行的操作
      },

      onShow:function(){
        //页面打开时,触发执行的操作
      }

      onHide:function(){
        //页面隐藏时,触发执行的操作
      }

  })

 

  *** 怎么写app.json文件(注意:里面的涉及的实例都是json实例)

    * 说起json,首先想到的是json实例,即{}
    * 既然是全局配置文件,那么首先想到的是pages属性,即{"pages":{}}
    属性值也是一个实例{},里面是逗号分隔的多个页面的路径字符串
    * 接着是window属性,即{"window":{}}
    属性值也是一个json实例,即{"页面窗口属性名称":"属性值"}
    * 再接着是tabBar属性,即{"tabBar":{}}
    属性值也是一个json实例,即{"标签页的表现":"属性值"}


  *** 怎么写page.wxml文件(类似html,写各种标签)
    * 使用组件
    * <view></view> <text></text>
    * 绑定数据 {{数据}} ,这些数据均来自于对应页面的.js文件中Page构造方法的data对象

    * 结合事件系统
    * 绑定事件的属性 bindtap


3.WXML具有数据绑定、列表渲染、条件渲染、模板及事件绑定的能力

  * 数据绑定

  <!-- demo.wxml -->
  <view>{{message}}</view>

  //demo.js
  Page({
    date:{message:"Hello MINA!"}
  })


  * 列表渲染

  <!-- demo.wxml -->
  <view wx:for="{{array}}">{{item}}</view>

  //demo.js
  Page({
    data:{
      array:[1,2,3,4,5]
    }
  })  

 

  * 条件渲染


  <!-- demo.wxml -->
  <view wx:if="{{view == ‘WEBVIEW‘}}"> WEBVIEW </view>
  <view wx:if="{{view == "APP"}}"> APP </view>
  <view wx:if="{{view == "MINA"}}">MINA</view>

  //demo.js
  Page({
    data:{
      view:"MINA"
    }
  })


  * 模板

  <!-- demo.wxml -->
  <template name="staffName">
    <view>
      FirstName:{{firstName}},lastName:{{lastName}}
    </view>
  </template>

  <template is="staffName" data="{{...staffA}}"></template>
  <template is="staffName" data="{{...staffB}}"></template>


  //demo.js
  Page({
    data:{
      staffA:{firstName:"Weiwei",lastName:"Hu"},
      staffB:{firstName:"tianhao",lastName:"Wang"}
    }
  })

  注:“...” 为扩展运算符,用它来展开一个对象,如staffA对象


  * 事件绑定

  <!-- demo.wxml -->
  <view bindtap="add">{{count}}</view>

  //demo.js
  Page({
    data:{
      count:1
    },
    add:function(){
      this.setData({
        count:this.data.count + 1
      })
    }
  })


4.引用


  WXML提供两种文件引用方式:import和include
  (1)import(引入的是模板)
  <!-- item.wxml -->
  <template name="item">
    <text>{{name}}</text>
  </template>

  在index.wxml中引用了item.wxml,就可以使用item模板了
  <import src="item.wxml"/>
  <template is="item" date="{{name:‘图书馆‘}}"/>


5.生命周期,每个页面第一次出现,都是经历onLoad-onShow-onReady,
如果页面跳转了,则会onHide,再返回出现就是onShow。如果页面被
重定向了,则会onUnload,以后不会再返回了。


6.页面导航组件:跳转


   wx.navigateTo(object):保留当前页面,跳转到应用内的某个页面。可以返回到原页面

  例如wx.navigateTo({url:"../index/index?name=‘wang‘&age=26"})


  wx.redirectTo(object):关闭当前页面,跳转到应用内的某个页面。

  wx.navigateBack(objext):关闭当前页面,回退至前一页面。

  wx.switchTab(object):跳转tabBar页面并关闭其他所有非tabBar页面。

 

7.相对定位和绝对定位

   相对定位的元素是相对自身进行定位,参照物是自己 position=relative; top=50px;

   绝对定位的元素是相对离他最近的一个已定位的父级元素进行定位 position=absolute; top=50px;


8.<scroll-view>滚动区域组件

  属性:
   style="height:200px" :滚动区域的高度200px
   scroll-y="true" :纵向滚动条
   bindscroll="事件" :只要一滚动,就触发事件
   bindscrolltoupper="toupper" :向上滚动到顶部触发事件
   bindscrolltolower="tolower" :向下滚动到低部触发事件
   upper-threshold:"50" :默认向上滚动至离顶部50px时,触发bindscrolltoupper绑定的事件
   lower-threshold:"50" :默认向下滚动至离低部50px时,触发bindscrolltolower绑定的事件
   scroll-top="0" :设置滚动条一开始出现,到顶部的距离
   scroll-into-view="<scroll-view>的子元素的id" :滚动条一开始就会出现在id对应的子元素那里,子元素会出现在滚动区域的最顶部

 

微信小程序学习笔记(一)

上一篇:微信群防封要提前:微信群可以重新建,永久封号你怕不怕?


下一篇:这款APP太像微信 腾讯起诉索赔1000万