文档章节

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"}

© 著作权归作者所有

共有 人打赏支持
上一篇: 3.项目结构
下一篇: 下载安装1
粉丝 1
博文 107
码字总数 44451
作品 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
集成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
Springmvc集成 mybatis

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

warlockssss
2016/09/13
26
1
Bootstrap Paginator分页插件使用

Bootstrap Paginator分页插件使用 概述 Bootstrap Paginator是一款基于Bootstrap的js分页插件。它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事...

1027888989178846
2018/12/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jenkins 配置

1. ssh-keygen -t rsa 2. 配置 GitLab 用户 创建一个用户或选择一个已有用户,用来让 Jenkins 和 GitLab API 交互。这个用户将需要是全局的管理员或添加进每个组/工程,并作为成员。需要开发...

应如是
29分钟前
1
0
中台迷思

到处都在喊中台,到处都是中台,中台这个词在我看来已经被滥用了。 在有些人眼里:中台就是技术平台,像微服务开发框架、Devops平台、PaaS平台,容器云之类的,人们都叫它“技术中台”。 在有...

老道士
36分钟前
3
0
Linux命令参数解析

Linux命令参数 通过一个例子来理解什么是Linux命令参数。以Linux中常用的删除命令“rm”为例,输入“rm --help”可以看到如下信息,其中红色框内的就是命令参数。经常使用Linux对命令参数应该...

RongJinhui0
39分钟前
1
0
边缘节点服务ENS重磅升级 阿里云首次定义“边缘云计算”概念层层深入

摘要: 在这一横一纵之间,阿里云在2018年率先提供了基于运营商边缘节点和网络的弹性分布式算力资源平台,也就是边缘节点服务ENS,连接最后10公里的ENS可以帮助用户将计算、转发等业务下沉至...

阿里云云栖社区
44分钟前
2
0
阿里云 Aliplayer高级功能介绍(四):直播时移

基本介绍 时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址;对于常规的HLS直播而言,TS分片地址及相...

阿里云官方博客
47分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部