筆者近期接觸了不少?gòu)氖潞蠖碎_(kāi)發(fā)的Java、C++程序員，紛紛表示了想要了解小程序開(kāi)發(fā)技術(shù)的興趣。下面，結(jié)合一個(gè)Hello world的小程序示例，給大家簡(jiǎn)單講解一下如何在騰訊云上開(kāi)發(fā)一個(gè)簡(jiǎn)單的小程序demo，小程序示例的完成結(jié)果如下： 

1.Hello World 小程序代碼結(jié)構(gòu) 

app.js定義了小程序的啟動(dòng)邏輯 
app.json定義了小程序的頁(yè)面結(jié)構(gòu),目前我們的小程序只有一個(gè)index頁(yè)面 
index.wxml定義了歡迎頁(yè)面的有什么，目前我們放了一張gif、一個(gè)按鈕和一個(gè)文字標(biāo)簽。 
index.wxss 定義了歡迎頁(yè)面的樣式 
index.js定義了歡迎頁(yè)面的業(yè)務(wù)邏輯

2.小程序用到的組件與云服務(wù)

騰訊云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. {
12. "pages":[
13. "pages/index/index"
14. ],
15. "window":{
16. "backgroundTextStyle":"light",
17. "navigationBarBackgroundColor": "#fff",
18. "navigationBarTitleText": "WeChat",
19. "navigationBarTextStyle":"black"
20. }
21. }

//index.js

1. //獲取應(yīng)用實(shí)例
2. var app = getApp()
3. Page({
4. data: {
5. words: '點(diǎn)按鈕讓我說(shuō)話',
6. userInfo: {}
7. },
8.  
9. say: function( e ) {
10. var hello = require('../../utils/hello.js');
11. hello( this );
12. },
13. onLoad: function () {
14. }
15. })

//index.wxml

1. <view class="container">
2. <view bindtap="bindViewTap" class="userinfo">
3. <image class="userinfo-avatar" src="/res/face.gif" mode="widthFix"></image>
4. <text class="userinfo-nickname">{{userInfo.nickName}}</text>
5. </view>
6.  
7. <view class="hello" >
8. <text>{{words}}</text>
9. </view>
10.  
11. <button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="say"> 請(qǐng)說(shuō)話 </button>
12.  
13. </view>

//Hello.js 定義兩個(gè)版本的Hello world邏輯，V1是將標(biāo)簽文字替換為“Hello world”,V2是將從騰訊云數(shù)據(jù)庫(kù)拉取回的數(shù)據(jù)（不同語(yǔ)言的hellow world）顯示在標(biāo)簽里。

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

4.后端代碼

鏈接騰訊云主機(jī)上XMP.JS的Baas服務(wù)，把數(shù)據(jù)庫(kù)中讀取的信息顯示在index.wxml頁(yè)面的<text>{{words}}</text>標(biāo)簽里。  //文件test.PHP

1. <?php
2.  
3. $mysqli = new mysqli("10.66.151.210", "root", "yun123456", "words");
4.  
5. / check connection /
6. if ($mysqli->connect_errno) {
7. printf("Connect failed: %s\n", $mysqli->connect_error);
8. exit();
9. }
10.  
11. $query = "SELECT * FROM hello ORDER BY RAND() LIMIT 1";
12. $result = $mysqli->query($query);
13.  
14. / associative array /
15. $row = $result->fetch_array(MYSQLI_ASSOC);
16.  
17. echo json_encode(end($row));
18.  
19. / free result set /
20. $result->free();
21.  
22. / close connection /
23. $mysqli->close();