zoukankan      html  css  js  c++  java
  • 微信小程序学习笔记(一)

    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对应的子元素那里,子元素会出现在滚动区域的最顶部

  • 相关阅读:
    进制转化
    8.28总结前日及今日
    Uva1213(线性筛模板+dp)
    Uva1363(余数性质/减少枚举量)
    Uva1640(统计数字出现的次数)
    Uva1639(概率期望/对数处理避免丢失精度)
    Uva12034 (组合数取模)
    Uva10820 欧拉公式模板(求小于n且与n互素的数的个数)
    Uva1635 二项式递推+质因子分解+整数因子分解
    8.19总结今日
  • 原文地址:https://www.cnblogs.com/zui-ai-java/p/10415762.html
Copyright © 2011-2022 走看看