微信小程序(应用号)开发新闻客户端实例

时间:2021-05-18

下载最新版的微信小程序开发工具,目前是v0.9.092300

下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html
git下载地址:http://git.oschina.net/dotton/news

先看下效果图:

Paste_Image.png

一、新建应用

1.内测阶段对于无内测号的开发者,请点无AppId。

Paste_Image.png

2.然后选择一个本地目录作为工程目录。

Paste_Image.png

3.项目名称任意,设置好目录,勾上当前目录创建quick start项目。如图:

Paste_Image.png

4.点击添加项目,这时可以运行的效果。是自己的微信个人信息以及一HelloWorld文本框。
5.右边是调试窗口,有2个警告,是由于没有AppID导致的,可以暂时忽略,不影响开发。

Paste_Image.png

6.提示一下,在app.json中设置debug:true,这样控制台看到实时的交互信息,以及将来在js文件中设置断点,类似与Chrome的调试工具以及Firefox的Firebug。

关于首页配置:

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "debug":true}

其中pages属性表明每一个页面的存在,其中第一条为首页,即pages/index/index

二、请求网络API接口

1.前提条件:

这里需要用到聚合数据的新闻接口,前往:https:///debug/wxadoc/dev/framework/view/wxml/event.html

传值到详情页

<!--logs.wxml--><view class="container"> <text class="news-title">{{title}}</text> <text class="news-info">暂时找不到WebView的组件接口,于是不能加载网页数据</text></view> //事件处理函数 bindViewTap: function(event) { wx.navigateTo({ url: '../detail/detail?title='+event.currentTarget.dataset.newsTitle }) }//index.js //事件处理函数 bindViewTap: function(event) { wx.navigateTo({ url: '../detail/detail?title='+event.currentTarget.dataset.newsTitle }) }
<!--index.wxml-->//加入data-xxx元素来传值<view class="container news-list"> <block wx:for="{{techNews}}"> <view class="news-item" data-news-title="{{item.title}}" bindtap="bindViewTap"> <image src="{{item.thumbnail_pic_s}}" mode="aspectFill" class="list-image"/> <view class="news-text"> <text class="news-title">{{item.title}}</text> <view class="news-stamp"> <text>{{item.author_name}}</text> <text>{{item.date}}</text> </view> </view> </view> </block></view>

当然也可以通过获取全局的变量的方式传值,这里场景是由一个页面与子页面是一对一传值关系,所以不推荐,可参考quickStart项目中微信个人信息的传值方式来做。 app.js末尾加上

globalData:{
userInfo:null,
newsItem:null
}
})

Paste_Image.png

由于未在官方文档中找到WebView的组件,所以详情的网页正文暂时无法实现。

结语

整体开发过程还是比较舒适的,上手难度不高,过程中用到一定的CSS语法,本质上还是体现了一个H5开发模式,WXML实质上一种模板标签语言。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章