教你写一个云上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 条评论
登录 后参与评论

相关文章

来自专栏无原型不设计

Balanced-工具类App原型分享

Balanced是一款记事类的工具App,这类App在设计的时候讲究简单易用,如果操作太复杂,就不能做到记录事件的及时性和快速性。在制作原型时,这次尝试了将A...

3285
来自专栏河湾欢儿的专栏

html5标签

什么是html5? 仅仅是狭义的概念。h5草案前身叫做web application 由WHATWG组织编写,在2007年提交到了w3c,w3c起名叫做HTM...

3441
来自专栏向治洪

ReactJs和React Native的那些事

介绍  1,React Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你...

20210
来自专栏速成应用小程序开发平台

新手教程--手把手教你从零开始制作一款电商必备的商城小程序

近年来,在电商、新零售趋势的影响下,实体零售商也都在谋求自身的渠道变革,完善消费体验。如今微信已有超过十亿的用户,市场巨大,而微信小程序的开通不仅能够降低品牌...

2532
来自专栏程序员互动联盟

你所不知道的html5与html中的那些事(三)

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么...

3016
来自专栏进击的君君的前端之路

HTML5

6335
来自专栏前端杂货铺

关于首屏时间采集自动化的解决方案

关于首屏 首屏时间是指从转向该页面到屏幕中该页面所有内容都可见时的时间。已经有太多的关于首屏时间的计算,在本文中并不重复阐述这些已经被提出或者实现的方案,而旨...

5827
来自专栏程序员的碎碎念

【分享】Vue.js新手入门指南

最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学...

3613
来自专栏我和我大前端的故事

2018 我所了解的 Vue 知识大全(一)

Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的...

1023
来自专栏web前端教室

风继续吹&&先行者成员:王广铎(duo 二声)的作业分析,从他的作业理解“React单向数据流”

他的作业:“分页组件”React版,写的很好,主要是思路很清晰。本来是想上周日视频课程直播的时候讲一下了,现在只能是放在文章中大概的说说了。先看截图, ? 很...

2068

扫码关注云+社区

领取腾讯云代金券