文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

创建第一个react项目

sudo npm i -g create-react-app@1.5.2 create-react-app react-app cd react-apprm -rf package-lock.jsonrm -rf node_modules #主要是为了避免报错npm installnpm start......

lilugirl
今天
3
0
在浏览器中进行深度学习:TensorFlow.js (八)生成对抗网络 (GAN)

Generative Adversarial Network 是深度学习中非常有趣的一种方法。GAN最早源自Ian Goodfellow的这篇论文。LeCun对GAN给出了极高的评价: “There are many interesting recent development...

naughty
今天
0
0
搬瓦工镜像站bwh1.net被DNS污染,国内打不开搬瓦工官网

今天下午(2018年10月17日),继搬瓦工主域名bandwagonhost.com被污染后,这个国内的镜像地址bwh1.net也被墙了。那么目前应该怎么访问搬瓦工官网呢? 消息来源:搬瓦工优惠网->搬瓦工镜像站b...

flyzy2005
今天
9
0
SpringBoot自动配置

本篇介绍下,如何通过springboot的自动配置,将公司项目内的依赖jar,不需要扫描路径,依赖jar的情况下,就能将jar内配置了@configuration注解的类,创建到IOC里面 介绍下开发环境 JDK版本1.8 spr...

贺小五
今天
5
0
命令行新建Maven多项目

参考地址 # DgroupId 可以理解为包名# DartifactId 可以理解为项目名mvn archetype:generate -DgroupId=cn.modfun -DartifactId=scaffold -DarchetypeArtifactId=maven-archetype-quickst......

阿白
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部