my back pages

呵呵，是不是悬赏少了的缘故啊

方法如下：
一.
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2]; //上一个页面
//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
mydata: {a:1, b:2}
})
二.
回到上一页，在data里定义mydata，然后在onshow里
var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
console.log(currPage) ，就可以看到data里mydata的值了

是不是发现为什么底部不出现TabBar？原因在于，app.json头部的pages数组的第一项"pages/clickDemo/clickDemo"没有成为tabBar的一员，也就是在tabBar的list数组内没有链接click
Demo页面的条目。
【解决办法1】.我们在list数组内加入链接clickDemo页面的条目
【解决办法2】.把pages数组的第一项设置为"pages/index/index"，或者设置为"pages/logs/logs"。当然这个方法并不是我们所期望看到的。经过实践发现：app.json中pages数组中第一项（首页），必须在tabBar---list数组中出现，list中第几个无所谓；但如果首页不在list里面，当然无法渲染出来，这就可以理解app.json是首次页面配置了

1. JSON 配置文件小程序中，包含唯一的全局配置文件 app.json，以及每个页面的配置文件 page.json。每单页页面相应的 JSON 文件会覆盖与 app.json 相同的配置项。如下，是一个包含了所有配置选项的简单配置 app.json。"pages": [ //设置页面的路径"pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合"pages/logs/logs"],"window": { //设置默认窗口的表现形式

"navigationBarBackgroundColor": "#ffffff", //顶部导航栏背景色
"navigationBarTextStyle": "black", //顶部导航文字的颜色 black/white
"navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字
"backgroundColor": "#eeeeee", //窗口的背景色
"backgroundTextStyle": "light", //下拉背景字体、loading 图的样式，仅支持 dark/light
"enablePullDownRefresh": "false"， //是否支持下拉刷新 ，不支持的话就直接不写！
"disableScroll": true, //  设置true不能上下滚动，true/false，注意！只能在 page.json 中有效，无法在 app.json 中设置该项。},"tabBar": { //底部tab或者顶部tab的表现，是个数组，最少配置2个，最多5个
"list": [{ //设置tab的属性，最少2个，最多5个
"pagePath": "pages/index/index", //点击底部 tab 跳转的路径
"text": "首页", //tab 按钮上的文字
"iconPath": "../img/a.png", //tab图片的路径
"selectedIconPath": "../img/a.png" //tab 在当前页，也就是选中状态的路径
}, {    "pagePath": "pages/logs/logs",    "text": "日志"
}],  "color": "red", //tab 的字体颜色
"selectedColor": "#673ab7", //当前页 tab 的颜色，也就是选中页的
"backgroundColor": "#2196f3", //tab 的背景色
"borderStyle": "white", //边框的颜色 black/white
"position": "bottom" //tab处于窗口的位置 top/bottom
},"networkTimeout": { //默认都是 60000 秒一分钟
"request": 10000, //请求网络超时时间 10000 秒
"downloadFile": 10000， //链接服务器超时时间 10000 秒
"uploadFile": "10000", //上传图片 10000 秒
"downloadFile": "10000" //下载图片超时时间 10000 秒
},"debug": true //项目上线后，建议关闭此项，或者不写此项

2. JS 逻辑层

小程序的逻辑层由 JavaScript 语言完成。但因为小程序不在浏览器中运行，所以 JS 在 web 浏览器中的一些函数不能用，如 document、window 等。

app.js 有全局的小程序生命周期，page.js 有自己本页面的生命周期。

2.1 注册小程序 app.js

这一步骤，有这几个需要注意的地方：

• 必须在 app.js 中，使用 app() 函数注册微信小程序。全局小程序中，只能注册一次；

• 不能在 app() 内的函数中调用 getApp()（小程序实例），使用 this 就可以拿到小程序的实例；

• 不要在 onLaunch 的时候 getCurrentPage()，因为此时 page 还没有生成；

• 通过其他子页面调用 getApp() 获取实例后，不要私自调用小程序全局的生命周期方法；

• 可以通过 var app=getApp() 获取小程序的实例。

• app ( {  // 小程序生命周期的各个阶段


•  onLaunch: function(){},//当小程序初始化完成时，会触发 onLaunch（全局只触发一次）


•  onShow: function(){},//当小程序启动，或从后台进入前台显示，会触发 onShow


•  onHide: function(){},//当小程序从前台进入后台隐藏，会触发 onHide


•  onError: function(){},//当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息


•  // 自定义函数或者属性，用 this可以访问


•  ...


• })



2.2 注册小程序的页面 page.js

Page() 用来注册一个页面，维护该页面的生命周期以及数据。

• Page({  data: { //页面的初始数据//调用：{{text}} {{array[0].msg}}


•    text: 'init data',    array: [{      msg: '1'


•    }, {      msg: '2'


•    }]


•  },  // 页面生命周期的各个阶段


•  onLoad: function () {}, //生命周期函数--监听页面加载


•  onShow: function () {}, //生命周期函数--监听页面初次渲染完成


•  onReady: function () {}, //生命周期函数--监听页面显示


•  onHide: function () {}, //生命周期函数--监听页面隐藏


•  onUnload: function () {}, //生命周期函数--监听页面卸载


•  onPullDownRefresh: function () {}, //页面相关事件处理函数。如果需要监听用户下拉动作，需要 在app.json中配置  "enablePullDownRefresh":"true" 允许上拉刷新


•  onReachBottom: function () {}, //页面上拉触底事件的处理函数


•  onShareAppMessage: function () { //用户点击右上角分享


•    return {      title: '自定义分享标题',      desc: '自定义分享描述',      path: '/page/user?id=123'


•    }


•  },  // 自定义函数或者属性如：


•  customData: {    hi: 'MINA'


•  }...


• })



2.3 公共模块 util.js

公共模块方法需要通过 module.exports 对外暴露接口，使用的时候需要利用 require(path)，将文件引入。如：

• function sayHello(name) {//公共方法util类


•  console.log(`Hello ${name} !`)


• }module.exports.sayHello = sayHello//用module.exports 对外暴露接口


• //先引入文件，是新建的一个 utils 包，公共方法在 util.js 里面var util = require('../../utils/util.js')


• Page({//调用类


•  onLoad: function () {//  使用时，用 util 引用名调用，如：util.sayHello()


•    util.sayHello('我是传的值');


•  }


• })



2.4 数据操作

setData() 不能直接操作数据，例如 this.data.text="xxxxx" 就是错误的。你需要在 this.setData () 之中，进行数据的操作。

同时，这里有作用域的问题。比如，需要在局部函数中使用，就需要 .bind(this)。

如果你需要操作全局的数据，你需要在 app.js 中进行相应设置，例如：

• App({// app.js


•  globalData: 1})// 某 page.jsconsole.log(getApp().globalData)



3. 视图层 WXML

视图层的数据绑定均来自于 Page 中的 data，想要修改相应值，你需要用到 this.setData。数据绑定使用两对花括号，将变量名包起来。

3.1 条件渲染

你可以利用 if 和 else，在视图层上编写在特定情况下，出现的不同的视图结果。

• <view wx:if="{{zhenjiaa=='123'}}">123334</view><view wx:if="{{zhanjia}}">123334</view><view wx:if="{{len > 5}}">大于5我就显示了 </view><view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view><block wx:if="{{true}}"><view> view1 </view><view> view2 </view></block>



很多人会将 CSS 中的 display: hidden 属性，将其做一个比较。

• 微信小程序中的 wx:if 是惰性的。如果不符合渲染条件，它不会渲染相应部分；

• 使用 display: hidden 时，元素始终渲染，只是视图层上没有显示，用户看不见。

如果你的小程序有元素显示频繁切换的需求，建议你使用 display: hidden，能够为用户提供能顺畅的使用体验。

3.2 列表渲染

相当于让 WXML 处理一个循环。

在 WXML 中，你可以这样来建立一个 for 循环：

<view wx:for="{{array}}"> {{index}}:{{item}} </view>

然后在相应的 JS 中，新建一个数组：

• page.jsPage({  data: {


•    array: [1, 2, 3, 4, 5]


•  }


• })



需要注意的是，如果列表中的项需要动态添加到列表中，并希望项目保持原有的特征和状态，那么你应该使用 wx:key。

wx:key 有两种形式：

• 字符串：wx:key="unique"

• 保留关键字：wx:key="*this"

3.3 运算

WXML 可以执行简单的运算任务。例如：

<view> {{a + b}} + {{c}} + d </view>

也可以做到字符串拼接：

<view>{{"hello" + name}}</view>

甚至，你可以使用 ... 在 WXML 中展开对象。

3.4 模板

name 定义组件模版的名称，引用模版的时候使用 is 属性指定模版的名字，is 可以进行简单的三目运算，需要传入模版需要的 data 数据。

因为模版拥有自己的作用域，所以只能使用 data 传入数据，而不接受双花括号的写法。

• <template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view></template><!-- 其他代码 --><template is="msgItem" data="{{...item}}"/>



3.5 公共模块的引用

WXML 提供 import 和 include 两种文件引用方式。

import 有作用域的概念，不能多重引用。

• <!-- B.wxml --><import src="a.wxml"/><!-- A.wxml --><template name="A">


• <text> A template </text></template>



而 include 就可以多重引用了。

• <!--引用 header、其中 header.wxml 中也引用了 footer.wxml--><include src="header.wxml"/><view> body </view><!-- header.wxml --><view> header </view><include src="footer.wxml"/>



3.6 事件

名称以 bind 开头的事件不阻止冒泡，名称以 catch 开头的事件冒泡是阻止的。如 bindTap 和 catchTab。

在 WXML 中，可以使用 dataset 定义 data 中的数据，会通过事件传递。它的事件以 data- 开头，多个单词以 - 链接，如 data-a-b。

需要注意的是，使用这种方式定义的变量不能有大写。它会自动转成驼峰命名，调取的时候去驼峰命名的名字。

4. WXSS

WXSS 的用法类似于 CSS，并在 CSS 的基础上，扩展了 rpx 尺寸单位和样式导入功能。

WXSS 可以使用内联样式，但这样会影响渲染速度。

每个页面自己的 page.wxss 样式表，会覆盖全局样式表 app.wxss。

这个就是程序的基本架构。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。底部标签底部标签是一个tabBar。实现比较简单，只需要简单配置一下即可。 app.json

{

"pages":[

"pages/function/function",

"pages/pay/pay",

"pages/account/account",

"pages/index/index",

"pages/logs/logs"

],

"tabBar":{

"color": "#464a56",

"selectedColor": "#6595e9",

"backgroundColor": "#FFFFFF",

"borderStyle": "white",

"list": [{

"pagePath": "pages/function/function",

"text": "功能",

"iconPath": "images/tab_function_default.png",

"selectedIconPath": "images/tab_function_sel.png"

},{

"pagePath": "pages/pay/pay",

"text": "收款",

"iconPath": "images/tab_consume_default.png",

"selectedIconPath": "images/tab_consume_sel.png"

},{

"pagePath": "pages/account/account",

"text": "账户",

"iconPath": "images/tab_account_default.png",

"selectedIconPath": "images/tab_account_sel.png"

}]

},

"window":{

"navigationBarBackgroundColor": "#6595e9",

"navigationBarTextStyle":"white",

"navigationBarTitleText": "V50",

"backgroundColor": "#eeeeee",

"backgroundTextStyle":"light"

}

}

2.值得注意的地方，就是 pages 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。文件名不需要写文件后缀，因为框架会自动去寻找路径.json, .js , .wxml, .wxss的四个文件进行整合。

3.页面标题

这个标题如何实现？ 

4.我们只需要把所有页面通用的配置放在 page.json，然后在各个page的 .json文件里面配置每个页面特有的属性即可。因为在上面的 app.json 中已经配置了通用页面的 window属性了，我们只需要在function.json中配置页面标题即可

{

"navigationBarTitleText": "功能"  

}

5.轮播图

接下来实现顶部的轮播图。微信提供了一个swiper组件来实现轮播图。

<swiper indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<block wx:for="{{imgUrls}}">

<swiper-item>

<image src="{{item}}" class="slide-image" />

</swiper-item>

</block>

</swiper>

function.js

//function.js

Page({

data: {

indicatorDots: true,

autoplay: true,

interval: 5000,

duration: 1000,

imgUrls: [

'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'

], 

},

})

方法2

1. 但很多人不知道的是，其实微信小程序是可以借助一款简单实用的制作工具「即速应用」生成的。整个过程无需编程无需代码，通过简单的拖拽组件即可生成微信小程序，非常方便。下面分享一下微信小程序开发教程入门篇，让新手们迅速掌握微信小程序开发的基本方法。

2.登录即速应用官网，点击上方首页菜单的“立即制作”，即可开始进行制作。

选择“空白模板”，进行自由创作。如果想节省时间，也可以选择主题模板进行快速制作。

3.进入制作界面后，可以看到页面分组和页面属性。点击“组件库”，开始搭建页面。

4.根据自己的需求选择组件以搭建页面，每个组件的文案和图片都是可以自己编辑的。

5.即速应用有很多可供选用的组件。比如用于布局的双栏组件、面板组件、顶部导航组件和底部导航组件。

还有一些可以实现更多复杂功能的高级组件，比如动态列表组件、动态容器组件、自定义表单组件、个人中心组件。

6.把每个页面都编辑好，并做好页面之间的跳转，确保逻辑无误。全部做好之后，点击右上角的“保存”，然后点击“发布”。若是制作过程中想要找回之前的版本，只需要去历史记录中回复既可。

7.跳转页面后，再次点击“发布”，即可生成。

8.点击“小程序打包”，生成小程序的代码。打包下载之后，就可以直接上传到微信官方后台的开发者工具里，即可完美对接小程序。技术人员还可以根据自己的需求修改，在原有代码的基础上进行二次开发。

代码如下：

<style type="text/css" media="all">

#aa{ height:300px; width:300px; margin:o auto;}

#a1{ height:250px; width:300px; border:1px solid #0099CC; color:#000000; font-size:18px;}

#a2{ height:50px; width:300px; }

</style>

<script type="text/javascript">

function bb(o){

var dom = document.getElementById("a1");

if(parseInt(o)==1){

dom.style.cssText = "background-color:#009900;";

}else if(parseInt(o)==2){

dom.style.cssText = "background-color:#FFFF00;";

}else{

dom.style.cssText = "background-color:#FF0000;";

}

}

</script>

</head>

<body>

<div id="aa">

<div id="a1">div中的字体哦</div>

<div id="a2">

<input type="button" value="点击1" onclick="bb(1)" />

<input type="button" value="点击2" onclick="bb(2)" />

<input type="button" value="点击3" onclick="bb(3)" />

</div>

</div>

</body>

补充说明：

JSP全名为Java Server Pages，中文名叫java服务器页面，其根本是一个简化的Servlet设计，它 是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML(标准通用标记语言的子集)文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件，后缀名为(*.jsp)。 用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。