0%

上接suwiper 轮播图 在轮播图下方设置文章列表 效果就是图中黄色框框的样式; 将这个新闻列表看做一个整体view, 然后把其他的小控件看做子view,放置在大的view上面;

  1. 创建整体view 设置css样式表 .post-container { display: flex; flex-direction: column; margin-top: 20rpx; /* margin-bottom: 40rpx; / / background-color: white; / / border-bottom: 1px solid #ededed; / / border-top: 1px soli #ededed; */ padding-bottom: 5px; }
  2. 设置第一行内容,头像和日期 2017-10-10 css:样式表 .post-author-data { margin: 10rpx 0 20rpx 10rpx; } .post-author { width: 60rpx; height: 60rpx; vertical-align: middle; }
  3. 设置文章列表图片 2017-10-10
    1
    2
    3
    <text class='post-title'>两好三坏</text>
    <image class='post-image' src='../images/a.png' ></image>
    <text >爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.</text>
    .post-image { margin-left: 16px; width: 100%; height: 300rpx; margin: auto 0; margin-bottom: 15px; } .post-content { color: #666; font-size: 26px; margin-bottom: 20px; margin-top: 20px; letter-spacing: 2rpx; line-height: 40rpx; }
  4. 设置列表底部 点击和评论 2017-10-10
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <text class='post-title'>两好三坏</text>
    <image class='post-image' src='../images/a.png' ></image>
    <text >爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.</text>
    <view class='post-like'>
    <image class='post-like-images' src='../images/chat.png'></image>
    <text class='post-like-font'>92</text>
    <image class='post-like-images' src='../images/chat1.png'></image>
    <text class='post-like-font'>66</text>
    </view>
    .post-like { font-size: 13px; display: flex; flex-direction: row; line-height: 16px; margin-left: 10px; margin-top: 6px; margin-bottom: 2px; border-bottom: 1px solid #A4968E; } .post-like-images { height: 16px; width: 16px; margin-bottom: 1px; margin-right: 8px; margin-left: 6px; vertical-align: middle; } .post.like-font{ margin-left: 6px; vertical-align: middle; margin-right: 20px; }

做界面布局的时候一定要从整体去考虑布局效果, 不然写的css会很乱;

做过前端或者手机端的朋友都知道, 前后台交互使用json’或者xml数据 ; 上一篇文章我将文章列表的内容嵌套在了wxml文件中., 其实这样不对, 在前端代码中操作dom,给元素节点添加内容; 在微信小程序中也是一样, 使用小程序提供的模板对界面内容进行赋值操作; 微信提供了一系列的方法对数据进行渲染,数据绑定,列表循环,条件判断,模板,shi事件,引用等等,方便开发者快速上手进行开发;; 我们可以把上一届的代码进行抽取,使用列表循环对数据进行渲染; 例如我们创建一个数组,里面放置我们需要设置的json数据,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var testjson = [
{
title:"两好三坏",
content:"世界上最美好的爱情就是我爱你的时候你刚刚好也爱我",
},
{
title:"枕边书",
content:"我愿意做你手边的玫瑰",
},
{
title: "意中人",
content: "我愿意做你坟墓上的魂",
},
{
title: "青玉锦绣",
content: "君问归期未有期,却话巴山夜雨时",
}
];

然后在页面加载的函数中给Page的data设置数据, 微信提供了一个方法用于给data数组赋值;

1
2
3
this.setData({
infojson:testjson
});

然后是在页面中使用 列表循环对页面进行数据渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<block wx:for="{{infojson}}" wx:for-item="item" >
<view class='post-container' bindtap='touchInfo'>
<view class='post-author-data'>
<image class='post-author' src='../images/2.png'></image>
<text class='post-data'>2017-10-10</text>
</view>
<text class='post-title'>{{item.title}}</text>
<image class='post-image' src='../images/a.png' ></image>
<text >{{item.content}}</text>
<view class='post-like'>
<image class='post-like-images' src='../images/chat.png'></image>
<text class='post-like-font'>92</text>
<image class='post-like-images' src='../images/chat1.png'></image>
<text class='post-like-font'>66</text>
</view>
</view>
</block>

这样就好了, 以后还会将文章列表抽成template;

  • 每一个页面下对应配置的json, 但是只有app.json 文件可以配置 page这个数组, 页面下对应的json文件只能放置 window 配置项’

window数组的配置项:

  • navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如”#000000” navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white navigationBarTitleText String 导航栏标题文字内容 backgroundColor HexColor #ffffff 窗口的背景色 backgroundTextStyle String dark 下拉背景字体、loading 图的样式,仅支持 dark/light enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面相关事件处理函数。
  • onReachBottomDistance

tabbar 数组配置项

  • color HexColor 是 tab 上的文字默认颜色 selectedColor HexColor 是 tab 上的文字选中时的颜色 backgroundColor HexColor 是 tab 的背景色 borderStyle String 否 black tabbar上边框的颜色, 仅支持 black/white list Array 是 tab 的列表,详见 list 属性说明,最少2个、最多5个 tab position String 否 bottom 可选值 bottom、top

其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:

1
属性  类型  必填  说明
  • pagePath String 是 页面路径,必须在 pages 中先定义 text String 是 tab 上按钮文字 iconPath String 否 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效 selectedIconPath String 否 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

networkTimeout数组配置项 可以设置各种网络请求的超时时间。 属性说明: 属性 类型 必填 说明

  • request Number 否 wx.request的超时时间,单位毫秒,默认为:60000 connectSocket Number 否 wx.connectSocket的超时时间,单位毫秒,默认为:60000 uploadFile Number 否 wx.uploadFile的超时时间,单位毫秒,默认为:60000 downloadFile Number 否 wx.downloadFile的超时时间,单位毫秒,默认为:60000

前两节介绍了小程序的开发配置和对视图 进行简单的数据渲染, 下面来介绍一些简单的基础控件和页面跳转: 小程序使用navigator来作为导航, 这一点和iOS的navigationBar很像;

  • 点击跳转新的界面

可以给按钮设置点击事件,然后再点击事件中设置跳转事件

1
2
3
4
5
6
7
8
<button bindtap='jump2page'>点我跳转</button>
<!-- 在对应页面的js文件中编写方法 -->
1. 这种方式是以打开新页面的形式进行跳转,可以使用 ? 拼接params
jump2page:function(){
wx.navigateTo({
url: '/pages/index/test?title=打开新页面啦',
})
}
  • 点击在当前的页面打开新的页面 点我跳转
    1. 这种方式是在当前页面打开,可以使用 ? 拼接params jump2page:function(){ wx.redirectTo({

    url: ‘/pages/index/test?title=打开新页面啦’,

    1
    2
         })
    }
  • 关闭当前页面 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。 // 此处是A页面 wx.navigateTo({ url: ‘B?id=1’ }) // 此处是B页面 wx.navigateTo({ url: ‘C?id=1’ }) // 在C页面内 navigateBack,将返回A页面 wx.navigateBack({ delta: 2 })
  • 还可以在wxml中使用 navigation 标签进行设置页面跳转 /** wxss / / 修改默认的navigator点击态 / .navigator-hover { color:blue; } / 自定义其他点击态样式类 **/ .other-navigator-hover { color:red; } 跳转到新页面 在当前页打开 切换 Tab

  • 获取微信小程序的appid (不可以使用服务号或者订阅号的appid)
  • 文件结构介绍 –Pages —-index ——index.js ——index.wxml ——index.wcss —-logs ——logs.js ——logs.wxml ——logs.wcss –until ——until.js –app.json –app.wxss –project.config.json –app.js
    阅读全文 »

使用小程序视图层进行数据渲染 使用微信给出的一些功能, 我们可以对wxml页面视图进行一些常见的数据渲染,例如: 数据绑定

1
2
3
4
5
6
7
8
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
阅读全文 »

关于 cookie 在日常开发中我们会遇到这样的需求场景: 用户在首次登录使用后,离开了这个网站(没有点击注销登录), 再次回到这个站点的时候,不需要重新登录,仍是自己上次登陆的账号信息; 我们可以使用 cookie 中存储用户的信息,并且判断是否需要加载用户信息并重新登录; php 使用 setCookie 函数来设置 Cookie 信息,但是有一点值得注意,Cookie是HTTP协议头的一部分,用于浏览器和服务器之间传递信息,

阅读全文 »

今天看了一下建军大业的预告片,看到曹植《白马篇》里面这一句 捐躯赴国难,视死忽如归! 不知怎地忽然想到了陈可辛导演的电影《十月围城》了,看过这部同名电视剧的人大概都知道这部电视剧讲的是孙先生和大清王朝之间不得不说的故事。 这部电影也是一样的,讲的是孙先生到访香港参加同盟会会盟,清政府派出将军阎孝国刺杀孙先生,几个小人物作为保镖保护孙先生顺利完成会盟而牺牲的的故事; 影片开头就开始讲清政府暗杀革命义士,一位姓杨的教授慷慨激昂的向学生们宣扬民主精神, 下课后,杨教授被学生围在中间讨论关于民主,为民所有, 为民所致,为民所享 ,女学生问,能看到那一天吗 教授回到: 我知道,这一天快到了, 就算我看不到,你一定能看到; 话刚说完,杨教授冷不丁的被清廷杀手一枪爆头, 镜头一转,阎孝国手里冷峻的枪管冒着些许热气;

阅读全文 »

从一封匿名信里看见一句话,是“数麻石片”(原注江苏方言),大约是没有本领便不必提倡改革,不如去数石片的好的意思。因此又记起了本志通信栏内所载四川方言的“洗煤炭”。想来别省方言中,相类的话还多;守着这专劝人自暴自弃的格言的人,也怕并不少。   凡中国人说一句话,做一件事,倘与传来的积习有若干抵触,须一个斤斗便告成功,才有立足的处所;而且被恭维得烙铁一般热。否则免不了标新立异的罪名,不许说话;或者竟成了大逆不道,为天地所不容。这一种人,从前本可以夷到九族,连累邻居;现在却不过是几封匿名信罢了。但意志略略薄弱的人便不免因此萎缩,不知不觉的也入了“数麻石片”党。   所以现在的中国,社会上毫无改革,学术上没有发明,美术上也没有创作;至于多人继续的研究,前仆后继的探险,那更不必提了。国人的事业,大抵是专谋时式的成功的经营,以及对于一切的冷笑。   但冷笑的人,虽然反对改革,却又未必有保守的能力:即如文字一面,白话固然看不上眼,古文也不甚提得起笔。照他的学说,本该去“数麻石片”了;他却又不然,只是莫名其妙的冷笑。   中国的人,大抵在如此空气里成功,在如此空气里萎缩腐败,以至老死。   我想,人猿同源的学说,大约可以毫无疑义了。但我不懂,何以从前的古猴子,不都努力变人,却到现在还留着子孙,变把戏给人看。还是那时竟没有一匹想站起来学说人话呢?还是虽然有了几匹,却终被猴子社会攻击他标新立异,都咬死了;所以终于不能进化呢?   尼采式的超人,虽然太觉渺茫,但就世界观有人种的事实看来,却可以确信将来总有尤为高尚尤近圆满的人类出现。到那时候,类人猿上面,怕要添出“类猿人”这一个名词。   所以我时常害怕,愿中国青年都摆脱冷气,只是向上走,不必听自暴自弃者流的话。能做事的做事,能发声的发声。有一分热,发一分光,就令萤火一般,也可以在黑暗里发一点光,不必等候炬火。   此后如竟没有炬火:我便是唯一的光。倘若有了炬火,出了太阳,我们自然心悦诚服的消失。不但毫无不平,而且还要随喜赞美这炬火或太阳;因为他照了人类,连我都在内。   我又愿中国青年都只是向上走,不必理会这冷笑和暗箭。尼采说:“真的,人是一个浊流。应该是海了,能容这浊流使他干净。   “咄,我教你们超人:这便是海,在他这里,能容下你们的大侮蔑。”(《札拉图如是说》的《序言》第三节)      纵令不过一洼浅水,也可以学学大海;横坚都是水,可以相通。几粒石子,任他们暗地里掷来;几滴秽水,任他们从背后泼来就是了。   这还算不到“大侮蔑”——因为大侮蔑也须有胆力。