教你写一个云上Hello world小程序

小程序上线一月有余,有不少创业团队如朝夕日历、小睡眠、小密圈等工具性的应用享受了这一波产品红利,收获了数十万新用户。

笔者近期接触了不少从事后端开发的Java、C++程序员,纷纷表示了想要了解小程序开发技术的兴趣。下面,结合一个Hello world的小程序示例,给大家简单讲解一下如何在腾讯云上开发一个简单的小程序demo,小程序示例的完成结果如下:

1.Hello World 小程序代码结构

app.js定义了小程序的启动逻辑

app.json定义了小程序的页面结构,目前我们的小程序只有一个index页面

index.wxml定义了欢迎页面的有什么,目前我们放了一张gif、一个按钮和一个文字标签。

index.wxss 定义了欢迎页面的样式

index.js定义了欢迎页面的业务逻辑

2.小程序用到的组件与云服务

腾讯云CVM:https://www.qcloud.com/product/cvm

腾讯云Mysql:https://www.qcloud.com/product/cdb

XMP.JS:https://git.oschina.net/xpmjs/xpmjs

3.前端代码

//app.js

App({ onLaunch: function () { var logs = wx.getStorageSync('logs') || [] }, globalData:{ userInfo:null } })

//app.json

{ "pages": "pages/index/index" , "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }

//index.js

//获取应用实例 var app = getApp() Page({ data: { words: '点按钮让我说话', userInfo: {} }, say: function( e ) { var hello = require('../../utils/hello.js'); hello( this ); }, onLoad: function () { } })

//index.wxml

<view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="/res/face.gif" mode="widthFix"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="hello" > <text>{{words}}</text> </view> <button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="say"> 请说话 </button></view>

//Hello.js 定义两个版本的Hello world逻辑,V1是将标签文字替换为“Hello world”,V2是将从腾讯云数据库拉取回的数据(不同语言的hellow world)显示在标签里。

function hello_v1( page ) { page.setData({words:'HELLO WORLD!'}); }function hello_v2( page ) {page.setData({words:'LOADING...'}); wx.request({ url: 'http://wwp.appcook.cn/test.php', //仅为示例,并非真实的接口地址 data: {t:Date.parse(new Date())}, header: { 'content-type': 'application/json' }, success: function(res) { page.setData({words:res.data}); } }) }module.exports = hello_v1

4.后端代码

链接腾讯云主机上XMP.JS的Baas服务,把数据库中读取的信息显示在index.wxml页面的 <text>{{words}}</text>标签里。

//文件test.PHP

<?php $mysqli = new mysqli("10.66.151.210", "root", "yun123456", "words"); /* check connection */ if ($mysqli->connect_errno) { printf("Connect failed: %s\n", $mysqli->connect_error); exit(); } $query = "SELECT * FROM `hello` ORDER BY RAND() LIMIT 1"; $result = $mysqli->query($query); /* associative array */ $row = $result->fetch_array(MYSQLI_ASSOC); echo json_encode(end($row)); /* free result set */ $result->free(); /* close connection */ $mysqli->close();

相关推荐

简约而不简单——大众点评+小程序开发经验谈

新增线下、APP、公众号多处入口,小程序会再火起来么?(内有福利)

小程序发布后最全解析!

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

一睹妆容,Android 8.0 开发者预览版来了

一年一年的更新,一年比一年好,一年又一年的期待,可是国内手机用户,现在大多数还停留在 5.0 ,6.0 的 Android 系统年代,7.0 牛轧糖什么味还有很...

17910
来自专栏Guangdong Qi

iOS 审核被拒之第三方登陆

这是个什么鬼 17.2 Details We noticed that your app uses QQ,WeChat and Weibo login for...

832
来自专栏黑白安全

注入利器之“四人帮”

“注入”者,名如其义,在与对方数据库的一次次“别有用心”刺探访问中猜解出那些敏感信息的长要、范围,最终精确到点,颇有些让自己战友悄悄地打入敌人内部一样。看危险漫...

551
来自专栏源码之家

帝国CMS全自动采集——发布更新教程

7654
来自专栏程序员的SOD蜜

探寻背后的机制化繁为简:网站程序升级不过是文件同步

苹果落到地上而不是天上,这是重力的作用; 树叶从树枝上飘落的样子谁也无法预测,这是混沌过程; 热恋中的恋人总是难分难舍,这是荷尔蒙等激素作用于下丘脑的结果; 。...

1995
来自专栏极客编程

Java为Hyperledger Fabric(超级账本)开发区块链链代码智能合约之环境部署

您或许听说过区块链,但可能不确定它对 Java™ 开发人员有何用。本教程将帮助大家解惑。我将分步展示如何使用 Hyperledger Fabric v0.6 来...

592
来自专栏IT派

你还在付费爱奇艺VIP?神级程序员教你用Python任意下!

我相信如果看电影的都知道,不管是爱奇艺还是腾讯视频还是优酷很多的电影电视都是需要VIP的,但是为了看这么一个电视或者电影开个vip又不是很划算,小编今天教大家如...

904
来自专栏iOSDevLog

应用程序内购买教程:入门

更新说明:Pietro Rea为Xcode 10,Swift 4.2和iOS 11/12更新了本教程。Ray Wenderlich写了原文。

922
来自专栏FreeBuf

联想Z470黑化之路:硬件升级还能刷苹果Mac系统!

11年入手了一台联想Z470,到现在也有些年头了,当年是看中了它的外观,现在想来性能是它的短板。然而为了工作需要,我便又购置了一台高性能电脑。现如今便想着怎么处...

3705
来自专栏针针小站

【Soft】多语言的下载实用工具 – Nagisa

1084

扫码关注云+社区