文档章节

2.demo学习

 金于虎
发布于 2016/11/08 14:29
字数 842
阅读 8
收藏 0

#1. 项目核心文件

###app.js

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API, ###app.json app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。

###app.wxss

app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

  1. 事件
  2. 全局函数
  3. 全局属性

##2. 页面核心文件

###页面目录和配置以及小程序首页

微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。 ###页面组成 每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:

  1. index.js
  2. index.wxml
  3. index.wxss
  4. index.json

.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。 注意:目录名称和文件名称最好一样

###index.js

index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例声明并处理数据响应页面交互事件等。

index.wxss

index.wxss 是页面的样式表, ###样式的覆盖,继承和和重写 页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

###index.json index.json 是页面的配置文件: ##配置的覆盖,继承和重写 页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。

demo片段

onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

##3.微信小程序的一些思想

  1. 微信小程序是以数据进行驱动的 (data属性)

  2. 单向数据绑定。 (数据渲染,模板引擎)

  3. MVC思想(DVC思想)data view controller

  4. wxml可以想成html但他的本质是xml(自定义的标签)

##4. 变量输出{{}}

  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>

##5.事件处理

  1. 绑定事件bindtap=“事件”

dmeo轻巧事件

  <view  bindtap="bindViewTap" class="userinfo">
  1. 事件处理函数
 //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },

##6. 页面跳转

 wx.navigateTo({
      url: '../logs/logs'
    })

#7. 作用域和优先级

页面作用域(page.js)和全局作用域(app.js)

app

"window":{
    "backgroundTextStyle":"light",
    
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }

页面

{  "navigationBarTitleText": "WeChat"}

© 著作权归作者所有

共有 人打赏支持
粉丝 1
博文 105
码字总数 42695
作品 0
曲靖
加载中

评论(1)

qianmenchuxue
qianmenchuxue
文章不错,请问是否可以转载分享?会注明作者原出处
右下角广告弹出框实现--JSADSENSE

代码一共3k,基于jquery的右下角广告弹出框实现,实现弹出信息、间隔时间、样式定义。 1.下载地址:http://wuzhi.me/?pageid=18 2.demo地址:http://wuzhi.me/example/jsadsense/ 3.配置说明:...

赵宇豪
2012/01/16
2.3K
0
Activiti快速入门--kft-activiti-demo

1.项目简介 1.1 项目信息 本项目旨在让Activiti初学者可以快速入门,使用工作流里面的请假流程作为Activiti企业实战的Hello World。 简单通过这个实例说明如何结合流程与业务,表单、业务、流...

咖啡兔
2012/12/16
62.7K
4
Springmvc集成 mybatis

1.准备工作 1)创建user表以及插入数据 2 )mybatis相关jar引入 <dependency> </dependency> <!--mybatis spring 插件 --><dependency> </dependency> 3)工程异常类DemoException定义 路径地......

warlockssss
2016/09/13
26
1
集成Junit

在demo-service层集成junit并实例测试。 1.demo-service中pom.xml 引入spring-test,junit中jar <dependency> </dependency> <dependency> </dependency> 2.demo-service中test目录 BaseJuni......

warlockssss
2016/09/19
3
0
bboss平台demo开发详解

bboss,开发平台,demo详解 本文介绍基于bboss开发平台做一个简单的demo模块-应用台账管理的代码目录结构和相关配置 1.demo java源程序 2.demo jsp文件 3.demo组件配置文件和国际化属性文件 4....

bboss
2015/09/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

八大包装类型的equals方法

先看其中一个源码 结论:八大包装类型的equals方法都是先判断类型是否相同,不相同则是false,相同则判断值是否相等 注意:包装类型不能直接用==来等值比较,否则编译报错,但是数值的基本类型...

xuklc
41分钟前
1
0
NoSQL , Memcached介绍

什么是NoSQL 非关系型数据库就是NoSQL,关系型数据库代表MySQL 对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很耗...

TaoXu
昨天
0
0
890. Find and Replace Pattern - LeetCode

Question 890. Find and Replace Pattern Solution 题目大意:从字符串数组中找到类型匹配的如xyy,xxx 思路: 举例:words = ["abc","deq","mee","aqq","dkd","ccc"], pattern = "abb"abc ......

yysue
昨天
1
0
Linux | Redis

写在前面的话 常言道,不作笔记不读书。在下是深有体会啊,所以,跟我一起做下本节的笔记吧,或许多年以后,你一定会感谢今天的你。 安装 在官网的下载页 Redis Download 直接写了在Linux的安...

冯文议
昨天
2
0
NoSQL-memcached

NoSQL介绍 NoSQL叫非关系型数据库。而关系型数据库代表有MySQL。对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很...

ln97
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部