微信小程序开发学习笔记002--微信小程序框架解密

1.今天内容比较多,
框架解密
• 目录结构
• 配置文件详解
• 逻辑层
• Api简介
-----------------------
2.打开微信开发工具,
点击添加项目,选择无appid模式
credemo02
点击添加项目就创建好了.

3.首先打开sublime
然后file-->open folder-->找到credemo02

4.好,然后咱们看看框架的分析:
框架解密图片:
框架分为:视图层和逻辑层
逻辑层可以通过api调用native app提供的
一些微信底层的功能,

视图层:wxml:微信自己定义的语言
wxss:微信定义的样式表
组件:app.js中咱们看看:
pages-->index-->index.wxml:

<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<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>
</view>
</view>

咱们看看里面的标签,有很多不是h5中的标签,他是
微信定义的标签
----------------------------
pages-->index-->index.wxss:
这跟css很像,但跟css又不一样:
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}

.userinfo-avatar {
width: 128rpx;//1.比如rpx单位,h5中没有
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}

.userinfo-nickname {
color: #aaa;
}

.usermotto {
margin-top: 200px;
}
--------------------------
好,视图层是wxml和wxss,这两个文件来做的,做界面的
对吧.

在小程序中的视图层,他提供了很多的组件,用来做
微信的小程序的ui
---------------------------
逻辑层是:
pages-->index-->index.js
里面用JavaScript描述的.

在逻辑层中,manger他提供了管理的一些东西,比如他里面
有生命周期的概念.
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {//1.比如这里的onload
//对吧,就是生命周期中的一部分
//
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})

咱们看
微信小程序框架分析.png

咱们看看框架的结构,中间有一部分是说逻辑层和
和视图层之间靠数据绑定联系在一块,咱们看看
什么是数据绑定.
-----------------------
数据绑定:
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
//1.这里数据部分,咱们看看这里如果
//motto: 'Hello World',-->motto: 'Hello',
//微信开发者工具中也变了对吧,
//也就是数据绑定.
//
motto: 'Hello World',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
------------------------------
微信小程序框架分析.png
下面还有一个事件对吧,咱们看看
由于视图层有按钮之类的对吧,只要我点击按钮
就会触发事件,然后事件对应逻辑层中的一个函数,
然后函数调用data层的,数据显示对吧.

然后左边的api,是逻辑层,负责调用微信底层的
能力,比如h5开发时,调用后端接口是怎么调用的?
ajax对吧.

ajax h5中有跨域的问题对吧?
jsonp不存在跨域问题对吧.

解决跨域问题,咱们可以使用jsonp解决对吧.
但是在微信小程序中他不存在跨域问题.

api可以获取当前网络的情况是什么等等..
-------------------------------
好,咱们看看小程序的目录结构:
credemo02
pages:
utils:
util.js
app.js
app.json
app.wxss
images

咱们还可以创建一个images文件夹,放图片
---------------
好,咱们看看
util.js
这里定义了一些工具集:
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()

var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()

return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}

//1.上面定义的方法,如果想提供给外界使用
//那么需要在
//exports中定义一下.像下面这样
module.exports = {
formatTime: formatTime
}
-------------------------------------
pages:在小程序中的所有页面会在这里面
index:页面是首页的意思.
logs:是日志的意思.

好,在index中描述页面的话,有:
index.js:页面的行为
index.wxml:页面构造:相当于html
index.wxss:页面样式

好,我还可以写一个index.json对吧
这个是对当前页面的配置:
比如,咱们可以把app.json中的
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
标题在index.json中覆盖一下看看.
比如在index.json中:
好,在添加
{
"navigationBarTitleText": "首页",
"navigationBarTextStyle":"red"
}

好,咱们看看效果,就变成了首页对吧.
字变成了红色对吧.
---------------------------------
app.json:
是小程序的配置文件.一会咱们再说

每个页面有四个文件:
比如:
index.js逻辑
index.json当前页面的配置
index.wxml当前页面结构
index.wxss当前页面的css样式.

app文件夹中,描述小程序主体的.
-------------------------------
注意index文件夹中的,index.json的优先级是
大于app.json中的,他会先去app.json再去
index.json中查找,app.json是全局的,index.json
是针对某个页面的.

好,咱们看看小程序的配置文件的详解:
这个配置文件在:小程序配置文件详解.pdf
中,参考.

咱们看看.app的配置文件:
app.json:
{
//1.pages:设置页面路径
//比如当前有个index页面,有个logs页面对吧.
//这是一个数组,按照数组的先后顺序,咱们存放
//比如先显示index,那就是把index放在前面
//以后,咱们写的所有页面都必须写到配置中去.
//否则,没有配置的页面将不会被加载.
//
//这里面第一个页面是首页.
//
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
-----------------------
这里,比如:
"pages":[
"pages/index/index",
"pages/logs/logs"
],
我到过来写:
{
"pages":[
"pages/logs/logs",
"pages/index/index"
],
这样显示的页面就会先显示logs的.
-------------------------------------
好,比如这里我新建一个页面,咱们看看:
在pages文件夹下,新建一个test目录
然后,新建
test.js
test.wxml
test.wxss
文件

咱们写一个test页面,
好,首先咱们看看:
由于,咱们安装了,小程序的sublime插件
咱们可以看到.
当输入wxpage时候,自动回车插入了下面的代码,比如
我给页面起个名字.

Page({
data:{
name:"创梦credream"
},
onLoad:function(options){

},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}
})
-------------------
好,然后我在
test.wxml中写上
<view class="mod-test">
{{name}}
<view>

<view>:小程序自己定义的标签
class="mod-test":添加选择器,跟css一样
---------------------------
test.wxss:
.mod-test{
text-align:center;
}
-----------------------
app.json
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",//1.字体的背景颜色
"navigationBarBackgroundColor": "#fff",
//2.导航条的背景颜色改成dfdfdf试试
"navigationBarTitleText": "WeChat",
//3.navigationBarTextStyle导航标题颜色
//
"navigationBarTextStyle":"black"
}
}
------------------------
当然,上面是全局的app.json
咱们可以修改:
test.json来修改test页面的
咱们可以新建一个test.json
写上,咱们看看标题变了对吧.
{
"navigationBarTitleText": "credreamTest"
}
--------------------------
注意,小程序的标题等等:
咱们看看在app.json中,被声明在了:
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
//1.被声明在了window这个里面对吧
//
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue"
}
}

但是咱们的测试页面,咱们可以看看:
test.json
{
"navigationBarTitleText": "credreamTest"
}

直接在里面这样写就可以了.这个要注意
------------------------------

好,咱们看看:
小程序配置文件详解.pdf
里面还有其他配置对吧,比如:
backgroundColor 背景色

咱们修改一下看看:
app.json:
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue",
//1.添加这里
"backgroundColor":"blue"
}
}

可以看到微信开发工具中,没有变对吧.
--------------------------------------
再改改:
test.wxss
.mod-test{
text-align:center;
//1.添加这句
height:100rpx;
}
再看看,还是没有生效对吧.

那好,咱们先试试其他的,这个背景颜色不是直接显示出来
的哈,他是其他意思,比如:
enablePullDownRefresh 开启下拉刷新
咱们看看:
------------------
app.json
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue",
"backgroundColor":"blue",
//1.添加:
"enablePullDownRefresh":"true"
}
}

添加以后,就可以下拉刷新了.

然后,咱们回到微信开发工具,下拉一下页面,一刷
可以看到上面就是蓝色了对吧.
----------------------------------
好,backgroundTextStyle:
下拉背景字体,loading图样式
这些可以自己试试
好,上面是所有的window中的配置.
---------------------------
好,咱们tabBar咱们看看再看看:
什么是tabBar?
是底部导航条哈.
-----------------------
怎么写呢?
咱们看看:
app.json中:
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue",
"backgroundColor":"blue",
"enablePullDownRefresh":"true"
}
}
,
//1.这里添加
//这里可以参考:
//小程序配置文件详解.pdf
"tabBar":{

}
---------------------
咱们看看,底部的导航,咱们怎么弄?
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue",
"backgroundColor":"blue",
"enablePullDownRefresh":"true"
},
//1.添加导航对吧.
//添加以后,咱们看看
"tabBar":{
//2.小程序配置文件详解.pdf中有
//list是,定位到不同的页面中
//比如test/index页面
//
"list":[
{
"text":"测试",
"pagePath":"pages/test/test"
},{
"text":"首页",
"pagePath":"pages/index/index"
}
]
}
}
----------------------------------
好,添加完以后,咱们刷新看看
可以了对吧,下面有两个导航内容了.
----------------------------------
好,咱们还可以添加一下颜色:
当前的tabBar的颜色对吧.
咱们看看:
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue",
"backgroundColor":"blue",
"enablePullDownRefresh":"true"
},
"tabBar":{
//1.设置tabBar的背景颜色
//
"backgroundColor":"#dfdfdf",
"list":[
{
"text":"测试",
"pagePath":"pages/test/test"
},{
"text":"首页",
"pagePath":"pages/index/index"
}
]
}
}
再看看效果,tabBar变灰色了对吧.
-----------------------------
还有,tabBar的,比如:
selectedColor对吧
咱们看看,选择颜色对吧.
app.json中
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue",
"backgroundColor":"blue",
"enablePullDownRefresh":"true"
},
"tabBar":{
"backgroundColor":"#dfdfdf",
//1.这里设置颜色对吧.
//
"selectedColor":"blue",
"list":[
{
"text":"测试",
"pagePath":"pages/test/test"
},{
"text":"首页",
"pagePath":"pages/index/index"
}
]
}
}
-------------------------------
好,下面咱们看看:
networkTimeout设置忘了超时时间
debug 是否开启debug
参照:小程序配置文件详解.pdf
咱们来看看:
app.json
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue",
"backgroundColor":"blue",
"enablePullDownRefresh":"true"
},
"tabBar":{
"backgroundColor":"#dfdfdf",
"selectedColor":"blue",
"list":[
{
"text":"测试",
"pagePath":"pages/test/test"
},{
"text":"首页",
"pagePath":"pages/index/index"
}
]
},
//1.这里我添加调试信息
//添加以后,咱们看看
//
"debug":"true"
}

咱们看看:
微信开发工具中点击调试,然后console中
出现了很多调试信息对吧.
-------------------------------
好,以上这是app.json的配置信息.

-----------------------------
好咱们再看看小程序的生命周期:
onLaunch:小程序初始化
onShow:小程序显示
onHide:小程序隐藏
onError:小程序出错
any:其他函数
---------------------
咱们看看.
app.js
//app.js
App({
//1.onLaunch:小程序初始化
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
//3.这也是any函数对吧.
//
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)
}
})
}
})
}
},
//2.这个是any其他函数对吧.
//
globalData:{
userInfo:null
}
})

好,这个是小程序的生命周期..
--------------------
好,咱们再看看,页面的生命周期
页面比如:
index.js
index.json
index.wxml
index.wxss

好,页面的生命周期是靠test.js描述的
Page({
//1.这个表示页面数据,把数据放在这里
//然后在test.wxml中就可以调用了.
//
data:{
name:"credream"
},
//2.onLoad监听页面加载
onLoad:function(options){

},
//3.页面加载成功
onReady:function(){

},
//4.页面显示
onShow:function(){

},
//5.页面隐藏
onHide:function(){

},
//6.页面卸载
onUnload:function(){

},
//7.页面下拉刷新
onPullDownRefresh:function(){

},
//8.点击分享按钮
onReachBottom:function(){

}
})
--------------------------------
好,比如,这里我用日志来打印一下看看
test.js
在h5中,onReady指的是节点加载ok了对吧.
而onLoad呢?指的是页面上所有的资源都加载
完成了对吧.

好没咱们看看:
他的加载的顺序对吧.
Page({
data:{
name:"credream"
},
onLoad:function(options){
//1.这里输出日志,会在调试
//控制台显示
console.log('onLoad')
},
onReady:function(){
//2.这里输出日志,会在调试
//控制台显示
console.log('onReady')
},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}
})

好,咱们去微信开发工具中看看
点击调试,可以看到:
onLoad先执行
onReady后执行对吧.

这个跟h5中是反过来的对吧.要跟以前的知识
做个对比.
---------------------------------
好,咱们再看看:
咱们的页面,比如在test.js中能不能拿到
在app.js中定义的数据呢?
咱们看看:
首先我在
app.js中定义数据:
//app.js
App({
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,
//1.这里定义一个数据
time:'2016/12/24'

}
})

然后咱们看看怎么在test.js中获取这里定义的数据啊:
可这样:
test.js
//1.首先通过这个getApp()
//获取app实例
//
var app = getApp();

Page({
data:{
name:"credream",
//2.这里定义一个time
//注意这里的定义是定义
//一个数据,这个数据将来
//可以在其他地方,比如页面
//上拿出来使用.
time:''
},
onLoad:function(options){
console.log('onLoad');
//3.通过app.globalData.time
//获取定义的时间数据.
//
console.log(app.globalData.time);
},
onReady:function(){
console.log('onReady')
},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}
})
----------------------------------
好,咱们去编译的界面看看,微信开发工具里面
可以看到调试里面,已经输出,咱们定义的
数据了对吧.
--------------------
好,这个数据,如何让他显示在页面上呢?
咱们看看:
咱们可以这样:
test.wxml
<view class="mod-test">
{{name}}
{{time}}
</view>

在页面的文件中加上时间的引用
但是,回到页面看看没有显示
---------------------------
是因为:
test.js中需要:
var app = getApp();

Page({
data:{
name:"credream",
//1.这里需要给定值
//
time:'2017/01/14'
},
onLoad:function(options){
console.log('onLoad');
console.log(app.globalData.time);
},
onReady:function(){
console.log('onReady')
},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}
})
------------------------------
回去看看,就能显示出来了对吧.

好,现在咱们显示的时间,是直接在test.js
中定义的对吧,如果咱们显示在app.js中定义的时间,
咱们看看怎么做?
test.js
var app = getApp();

Page({
data:{
name:"credream",
time:'2017/01/14'
},
onLoad:function(options){
console.log('onLoad');
//1.这里可以这样
//这样写,就可以取出app.js的globalData中
//定义的数据了.
//
this.setData({
time:app.globalData.time
})
console.log(app.globalData.time);

},
onReady:function(){
console.log('onReady')
},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}
})
-------------------------------------
好,当然在test.js中,咱们也可以拿到
app.js中的方法,比如:
我添加一个方法:
//app.js中
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
//1.这里添加一个方法
//
getUserName:function(){
return "dream";
},
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,
time:'2016/12/24'

}
})
------------------------
然后,在test.js中声明一个变量
来接收数据
咱们看看:
var app = getApp();

Page({
data:{
name:"credream",
time:'2017/01/14',
//1.声明接收数据的变量
//
username:''
},
onLoad:function(options){
console.log('onLoad');
this.setData({
time:app.globalData.time
})
//2.这里获取app.js中定义的数据
//咱们看看
//
this.setData({
username:app.getUserName()
})
console.log(app.globalData.time);

},
onReady:function(){
console.log('onReady')
},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}
})
-------------------------------
下次,咱们显示一个图片
好,在test.js中,咱们可以显示很多东西对吧.
可以做很多东西的.
------------------
好,接下来咱们看看:
api的简介:
打开帮助文档:
https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=2017112
可以看到,里面提供了很多的api对吧

好,咱们演示下怎么用:
咱们在onLoad中,调用一下
知乎日报的api咱们看看:
好,首先我找到知乎日报的api,显示一下给大家看看
http://news-at.zhihu.com/api/4/news/latest

访问一下,可以显示出来对应的新闻对吧.

好,咱们怎么调用呢?
咱们看看
在test.js中咱们看看:
var app = getApp();

Page({
data:{
name:"credream",
time:'2017/01/14',
username:''
},
onLoad:function(options){
console.log('onLoad');
this.setData({
time:app.globalData.time
})

this.setData({
username:app.getUserName()
})
//1.这里咱们输入wxrequ...咱们的sublime的
//插件就会自动导入下面的代码
//好每个参数是干嘛用的,在
//官网文档有解释
//
wx.request({
//1.这里给上url,webservice地址
//对吧.
//
url: 'http://news-at.zhihu.com/api/4/news/latest',
data: {
//1.这是发送给api地址的
//参数
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
//2.成功接收的数据
//咱们去调试窗口看看
//已经返回了数据对吧.
//可以看到有很多数据,咱们可以
//用一个列表显示一下对吧.
//
console.log(res.data)
},
fail: function(res) {

},
complete: function(res) {

}
})
console.log(app.globalData.time);

},
onReady:function(){
console.log('onReady')
},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}
})
---------------------------
比如:
https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html
wx.request发起的是 HTTPS 请求。

OBJECT参数说明：

参数名类型必填说明
url String 是开发者服务器接口地址
data Object、String 否请求的参数
header Object 否设置请求的 header , header 中不能设置 Referer
method String 否默认为 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType String 否默认为 json。如果设置了 dataType 为 json，则会尝试对响应的数据做一次 JSON.parse
success Function 否收到开发者服务成功返回的回调函数，res = {data: '开发者服务器返回的内容'}
fail Function 否接口调用失败的回调函数
complete Function 否接口调用结束的回调函数（调用成功、失败都会执行）
--------------------------------
有这些介绍对吧,好这些大家可以看看.

好,大家如果对h5了解,这个循环显示,就
很简单了,好咱们先看看这个怎么用
后边咱们详细的讲解:

比如,我现在test.js中,设置一个接收
这个list数据的变量:
var app = getApp();

Page({
data:{
name:"credream",
time:'2017/01/14',
username:'',
//1.首先声明一个list数组
//
list:[]
},
onLoad:function(options){
console.log('onLoad');
this.setData({
time:app.globalData.time
})

this.setData({
username:app.getUserName()
})

wx.request({
url: 'http://news-at.zhihu.com/api/4/news/latest',
data: {

},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res)
},
fail: function(res) {

},
complete: function(res) {

}
})
console.log(app.globalData.time);

},
onReady:function(){
console.log('onReady')
},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}
})
---------------------------------------
然后,咱们看看
声明list变量,以后,咱们看看如何显示
在test.wxml
<view class="mod-test">
{{name}}
{{time}}

<view>
{{username}}
</view>
//1.这里通过下面的这个格式来显示数据
//item.title因为,咱们看看调用api以后
//返回的数据,里面每一项都有title对吧
//所以,这里通过item.title来显示数据了.
//
<view wx:for="{{list}}">
{{item.title}}
</view>
</view>

好,现在咱们看看test.js中看看,没有看到
有显示的内容对吧,因为现在咱们在
test.js中list是空的对吧,

好,咱们来填充数据
test.js对吧,咱们看看:

var app = getApp();

Page({
data:{
name:"credream",
time:'2017/01/14',
username:'',
list:[]
},
onLoad:function(options){
console.log('onLoad');
this.setData({
time:app.globalData.time
})

this.setData({
username:app.getUserName()
})
//1.这里咱们定义一下这个this对吧
//为什么啊?
//
var that=this;
wx.request({
//2.因为这里如果,咱们使用this的话
//他指的是request这个对象,
//但是实际上咱们用的时候,要用这外面的this
//对吧,所以这里咱们把外面的this,接过来
//用一个that代指.
//
url: 'http://news-at.zhihu.com/api/4/news/latest',
data: {

},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res);
//3.这里给list填充数据
//
that.setData({list:res.data.stories})

},
fail: function(res) {

},
complete: function(res) {

}
})
console.log(app.globalData.time);

},
onReady:function(){
console.log('onReady')
},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}
})
------------------------------------
好,咱们看现在有数据了对吧,
微信开发工具中显示了,但是比较乱,咱们看看
可以改改样式
比如:
test.wxml中给他添加一个clas
<view class="mod-test">
{{name}}
{{time}}

<view>
{{username}}
</view>
//1.添加一个item对吧
//
<view wx:for="{{list}}" class="item">
//2.这个item是list中的每一项
//
{{item.title}}
</view>
</view>
-----------------------
然后在样式表中
test.wxss中
咱们看看:
.mod-test{
text-align:center;
height:100rpx;
}
//1.给item添加样式对吧
//
.mod-test .item{
text-align:left;
padding:5px;//2.内边距
border:1px solid #dfdfdf;
}

注意在test.js中
{}指的是一个对象,而在{}中使用this
他指的就是当前的{}这个对象.

好,今天就到这里.

微信小程序开发学习笔记002--微信小程序框架解密相关推荐

微信小程序开发学习笔记007--微信小程序项目01
技术交流QQ群:170933152 今天做项目小程序开发必备基础如何独立开发一个项目豆瓣电影需要的基础: HTML+CSS JavaScript 网络先理解需求-->了解项目流程,项目 ...
微信小程序开发学习笔记004--微信小程序语法结构
今天讲微信小程序的语法结构技术交流QQ群:170933152 数据绑定:把数据声明后显示在页面上渲染:条件渲染,循环渲染模板:某个小需求,模块封装成模板事件:点击一个按钮触发一个事件,发送一个 ...
微信小程序开发学习笔记006--微信小程序组件详解02
技术交流QQ群:170933152 案例7:开关选择器案例8:各种图标案例9:页面跳转案例10:多媒体音视频案例11:嵌入地图案例12:画布:在上面可以画柱状图等等. 今天继续讲组件: 登录 ...
微信小程序开发学习笔记005--微信小程序组件详解
先来再看看事件冒泡: 看个例子,新建项目库credemo05 case1.wxml <view bindtap="fn1"> outer <view bin ...
微信小程序开发学习笔记008--微信小程序项目02
技术交流QQ群:170933152 继续项目,做玩命加载中,一进来以后,咱们可以认为是没有数据的. 咱们来做这个玩命加载. 比如咱们在home.js中添加数据: var api = require(' ...
GTK+图形化应用程序开发学习笔记（五）—组装盒、组合表、固定容器构件
GTK+图形化应用程序开发学习笔记(五)-组装盒.组合表.固定容器构件一.组装盒组装盒(GtkBox)也称为组合构件.使用组装盒可以将多个构件放在一个容器中.容器可以把组装盒看作是一个构件.不像按 ...
GTK+图形化应用程序开发学习笔记（一）—概述
GTK+图形化应用程序开发学习笔记(一)-概述一.什么是GNOME. GNOME的意思是"GNU Network Object Model Environment"(GNU网络对 ...
⑤ESP8266 开发学习笔记_By_GYC 【ESP8266 IDF框架使用C++编程】
⑤ESP8266 开发学习笔记_By_GYC [ESP8266 IDF框架使用C++编程] 目录 ⑤ESP8266 开发学习笔记_By_GYC [ESP8266 IDF框架使用C++编程] 一.简 ...
微信小程序开发学习笔记一
微信小程序学习笔记(一) 环境使用及创建项目文件目录设置 JS文件环境使用及创建项目环境使用:微信开发者工具一个微信号只能开发一个微信小程序. 在微信小程序开发手册下载最新版本,学习不要bet ...

微信小程序开发学习笔记002--微信小程序框架解密

微信小程序开发学习笔记002--微信小程序框架解密相关推荐

最新文章

热门文章