QQ技术群
191103786
微信公众号
客户反馈
(86) 021-36359360-707

对外合作
(86) 021-36359360-511

商务邮箱
business@chinascope.com

技术支持
api@chinascope.com
证券基本面行情服务 深度分析服务 文本分析服务

股票实时热点(微信小应用)

1

注册微信小程序

注册网址:https://mp.weixin.qq.com
帐号类型:选择小程序。
(注册之后,等待审批,一般很快就会通过啦~~)

2

配置合法域名

因为这个教程需要使用第三方数据,所以需要设置request合法域名(必须是https)。
首先进入小程序,点击设置-开发设置-服务器配置:我们这里会用到自家的数据,所以这里填写
https://api.shukugang.com

3

下载开发工具

下载地址
根据你的系统选择需要的版本。
a.编写代码 点击开发者工具左侧导航的「编辑」,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。
最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。

• .js 后缀的是脚本文件
• .json 后缀的文件是配置文件
• .wxss 后缀的是样式表文件

微信小程序会读取这些文件,并生成小程序实例。
b.获取数据 制作资讯程序,从外部购买数据自然少不了~


点击查看 “如何调用数库API”


c.载入数据 一切准备就绪,找到index.js,我们使用微信提供的网络请求接口wx.request()来获取数据。这里只需要填入

• 资讯接口地址 “ https://api.shukugang.com/api/nlp/hot/news ”
• accessKey
• secretKey

(注意:这里必须是HTTPS,并且是在之前我们填写的request合法域名)
/** index.js **/
//获取应用实例
var app = getApp()
page({
    data:{
        array:[]
    },
    onLoad: function () {
        var that = this;
    wx.request({
            url: "https://api.shukugang.com/api/nlp/hot/news",
            data: {},
            header: {
                'Content-Type': 'application/json',
                'access_key': '您自己在数库开发者中心的access_key',
                'secret_key': '您自己在数库开发者中心的secret_key'
            },
            success: function(res) {
                var _data = res.data.message;
                if(_data){
                    that.setData({
                        array: _data
                    })
                }
                // console.log(_data)
            }
        })
    }
})

以下为请求成功后得到的数据:

    请求到的数据格式为:
    {
        "code": "200",
        "type": "SUCCESS",
        "message":[
            {
                "id": "581fea72e4b00a1bfa151a2b",
                "dt": 1478486180000,
                "title": "十三五我国特高压等输电技术新增达1.3亿千瓦",
                "auth": "中国证券网",
                "pos": 0,
                "stocks": []
            },
            {
                "id": "581fea72e4b00a1bfa1534df",
                "dt": 1478486340000,
                "title": "快乐购终止芒果TV等资产注入 湖南广电混改生变",
                "auth": "财新网",
                "pos": 0,
                "stocks": [
                    {
                        "code": "300413_SZ_EQ",
                        "name": "快乐购",
                        "tick": "300413"
                    }
                ]
            },
            {
                "id": "581gde72e4b430a1bfa151a2b",
                "dt": 1478486560000,
                "title": "具有良好储锂性能的"sno2中空纳米饼,
                "auth": "",
                "pos": 0,
                "stocks": []
            },
        ]
    }
我们将请求到数据更新到array中,接下来我们将数据绑定到界面。由于整个列表是一个可以滑动的列表,所以这里选择scrollview 控件,
接着使用 wx:for 绑定 array ,并在对应的元素绑定相应的字段:

•    item.title     新闻标题
•    item.dt       新闻日期
•    item.sum      新闻摘要
•    item.stocks    相关股票

    /**index.wxml**/
    < view class="container" >
        < scroll-view class="hotnews_list" scroll-y="true" >
            < block wx:for="{{array}}" >
                < view class="hotnews" >
                    < text class="news_tit" >{{item.title}}< /text >
                    < text class="news_time">{{item.dt}}< /text >
                    < text class="news_txt">{{item.sum}}< /text >
                    < text class="tag">相关股票 < /text >
                    < block wx:for="{{item.stocks}}" >
                        {{item.name}}
                        {{item.tick}}
                    < /block >
                < /view >
            < /block >
        < /scroll-view >
    < /view >
页面所用到的样式如下:
/**index.wxss**/
.userinfo{display:flex;flex-direction:column;align-items:center;}
.userinfo-avatar{width:128rpx;height:128rpx;margin:20rpx;border-radius:50%;}
.userinfo-nickname{color:#aaa;}
.usermotto{margin-top:200px;}
.hotnews_list{font-size:24rpx;padding:20rpx 0;height:98%;color:#aaa;}
.hotnews{display:block;padding:30rpx 0 50rpx 0;border-bottom:1rpx solid #ddd;}
.news_tit{font-size:28rpx;color:#000;}
.news_time{display:block;padding:18rpx 0;font-size:20rpx;}
.news_txt{display:block;padding-bottom:20rpx;color:#999;line-height:32rpx;}
.tag{font-size:22rpx;color:#666;border-left:8rpx solid #ddd;padding-left:12rpx;}
.tag_ele{font-weight:bold;color:#18adeb;font-size:22rpx;}
.tag_tick{padding-left:10rpx;color:#aaa;font-size:22rpx;margin-right:20rpx;}

保存编译之后,这个小项目就完成啦!界面如下图:
整个微信小应用开发过程十分简单,相对于原生APP开发而言就像是在写普通H5页面,
由于微信小应用内置了许多组件及API接口,可以十分方便搭配组装出应用,同时也不用特意考虑设备的兼容性。