澳门新蒲京娱乐


js实现上传图片预览方法_javascript技巧_脚本之家
图片 1
我国建成世界首例原位3D打印双层建筑,再添利器

开发新闻客户端的实战课程,微信小程序开发新闻客户端实例_JavaScript_脚本之家

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

摘要:
本实例将演示从零开发一个微信应用号的过程,页面轮播与跳转传值,实现单元格自定义布局,全部源码可通过github下载。

下载地址:

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

Paste_Image.png

图片 1Paste_Image.png

一、新建应用

一、新建应用1.内测阶段对于无内测号的开发者,请点无AppId。

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

图片 2Paste_Image.png

Paste_Image.png

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

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

图片 3Paste_Image.png

Paste_Image.png

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

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

图片 4Paste_Image.png

Paste_Image.png

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

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

图片 5Paste_Image.png

Paste_Image.png

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

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", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "debug":true}

其中pages属性表明每一个页面的存在,其中第一条为首页,即pages/index/index二、请求网络API接口1.前提条件:这里需要用到聚合数据的新闻接口,前往:
注册、申请接口,拿到key,我这里已经申请到一个key:482e213ca7520ff1a8ccbb262c90320a,可以直接拿它做测试,然后就可以将它集成到自己的应用了。2.使用微信小程序接口来访问网络:改写index.js文件:

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

//index.js//获取应用实例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { // 访问聚合数据的网络接口 wx.request({ url: 'http://v.juhe.cn/toutiao/index', data: { type: '' , key: '482e213ca7520ff1a8ccbb262c90320a' }, header: { 'Content-Type': 'application/json' }, success: function { console.log } }) console.log var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function{ //更新数据 that.setData({ userInfo:userInfo }) }) }})

二、请求网络API接口

3.查看效果,检查Console控制台,得到以下信息:

这里需要用到聚合数据的新闻接口,前往:

图片 6Paste_Image.png

2.使用微信小程序接口来访问网络:

说明已经成功取得到了数据。三、将json格式的数据渲染到视图这里要用到swipe组件实现大图轮播,文档见:

改写index.js文件:

<swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000"> <block wx:for="{{topNews}}"> <swiper-item> <image src="{{item.thumbnail_pic_s02}}" width="355" height="150"/> </swiper-item> </block></swiper>
//index.js//获取应用实例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { // 访问聚合数据的网络接口 wx.request({ url: 'http://v.juhe.cn/toutiao/index', data: { type: '' , key: '482e213ca7520ff1a8ccbb262c90320a' }, header: { 'Content-Type': 'application/json' }, success: function { console.log console.log var that = this //调用应用实例的方法获取全局数据 app.getUserInfo{ //更新数据 that.setData({ userInfo:userInfo }) }) }})

2.相应地在index.js文件的onLoad方法中加入如下代码来获取网络数据

3.查看效果,检查Console控制台,得到以下信息:

//index.js//获取应用实例var app = getApp()Page({ data: { topNews:[], techNews:[] }, onLoad: function () { var that = this // 访问聚合数据的网络接口-头条新闻 wx.request({ url: 'http://v.juhe.cn/toutiao/index', data: { type: 'topNews' , key: '482e213ca7520ff1a8ccbb262c90320a' }, header: { 'Content-Type': 'application/json' }, success: function { if (res.data.error_code == 0) { that.setData({ topNews:res.data.result.data }) } else { console.log; } } }) }})

Paste_Image.png

3.看到轮播已经成功的展示出来了

说明已经成功取得到了数据。

图片 7Paste_Image.png

三、将json格式的数据渲染到视图

4.依样画葫芦,同样操作读取列表新闻:

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图