用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:35

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

笔者近期接触了不少从事后端开发的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

  1. App({
  2. onLaunch: function () {
  3. var logs = wx.getStorageSync('logs') || []
  4. },
  5. globalData:{
  6. userInfo:null
  7. }
  8. })
  9. //app.json
  10. {
  11. "pages":[
  12. "pages/index/index"
  13. ],
  14. "window":{
  15. "backgroundTextStyle":"light",
  16. "navigationBarBackgroundColor": "#fff",
  17. "navigationBarTitleText": "WeChat",
  18. "navigationBarTextStyle":"black"
  19. }
  20. }

//index.js

  1. //获取应用实例
  2. var app = getApp()
  3. Page({
  4. data: {
  5. words: '点按钮让我说话',
  6. userInfo: {}
  7. },
  8. say: function( e ) {
  9. var hello = require('../../utils/hello.js');
  10. hello( this );
  11. },
  12. onLoad: function () {
  13. }
  14. })

//index.wxml

  1. class="container">
  2. bindtap="bindViewTap" class="userinfo">
  3. class="userinfo-avatar" src="/res/face.gif" mode="widthFix">
  4. class="userinfo-nickname">{{userInfo.nickName}}
  5. class="hello" >
  6. {{words}}
  7. type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="say"> 请说话

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

  1. function hello_v1( page ) {
  2. page.setData({words:'HELLO WORLD!'});
  3. }
  4. function hello_v2( page ) {
  5. page.setData({words:'LOADING...'});
  6. wx.request({
  7. url: 'http://wwp.appcook.cn/test.php', //仅为示例,并非真实的接口地址
  8. data: {t:Date.parse(new Date())},
  9. header: {
  10. 'content-type': 'application/json'
  11. },
  12. success: function(res) {
  13. page.setData({words:res.data});
  14. }
  15. })
  16. }
  17. module.exports = hello_v1

4.后端代码

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

  1. php
  2. $mysqli = new mysqli("10.66.151.210", "root", "yun123456", "words");
  3. / check connection /
  4. if ($mysqli->connect_errno) {
  5. printf("Connect failed: %s\n", $mysqli->connect_error);
  6. exit();
  7. }
  8. $query = "SELECT * FROM hello ORDER BY RAND() LIMIT 1";
  9. $result = $mysqli->query($query);
  10. / associative array /
  11. $row = $result->fetch_array(MYSQLI_ASSOC);
  12. echo json_encode(end($row));
  13. / free result set /
  14. $result->free();
  15. / close connection /
  16. $mysqli->close();
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏