【移動應(yīng)用開發(fā)技術(shù)】「小程序JAVA實(shí)戰(zhàn)」 小程序手寫屬于自己的第一個(gè)demo

【移動應(yīng)用開發(fā)技術(shù)】「小程序JAVA實(shí)戰(zhàn)」小程序手寫屬于自己的第一個(gè)demo（

自己嘗試的寫一個(gè)小demo，用到自定義樣式，自定義底部導(dǎo)航，頁面之間的跳轉(zhuǎn)等小功能。官方文檔對于小程序開發(fā)來說要時(shí)刻打開/miniprogram/dev/framework/config.html源碼：/limingios/wxProgram.git中的No.1自己嘗試的寫一個(gè)小demo，用到自定義樣式，自定義底部導(dǎo)航，頁面之間的跳轉(zhuǎn)等小功能。官方文檔對于小程序開發(fā)來說要時(shí)刻打開/miniprogram/dev/framework/config.html源碼：/limingios/wxProgram.git中的No.1項(xiàng)目名稱創(chuàng)建精簡下項(xiàng)目>將不需要的都刪除，簡化成一個(gè)很簡化的項(xiàng)目until文件夾和logs文件夾都刪除//app.js

App({

onLaunch:

function

()

{

}

})//app.json

{

"pages":[

"pages/index/index"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor":

"#fff",

"navigationBarTitleText":

"WeChat",

"navigationBarTextStyle":"black"

}

}定義文件夾+自定義頁面內(nèi)容復(fù)制index文件夾為idig88，將文件夾內(nèi)保留idig88.js和idig88.wxml精簡idig88.wxml內(nèi)容新增的idig88.wxml添加到app.json中，并添加到第一行讓起第一個(gè)啟動console可能會報(bào)錯，先不用管，后面咱們會解決的，第一個(gè)主要先能出效果了解小程序構(gòu)成結(jié)構(gòu)<!--idig88.wxml-->

<view

class="container">

這是第一個(gè)demo小程序

</view>app.json{

"pages":[

"pages/idig88/idig88",

"pages/index/index"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor":"#fff",

"navigationBarTitleText":"第一個(gè)demo",

"navigationBarTextStyle":"black"

}

}添加底部導(dǎo)航欄tabBar和網(wǎng)絡(luò)超時(shí)設(shè)置app.json{

"pages":[

"pages/idig88/idig88",

"pages/index/index"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor":"#fff",

"navigationBarTitleText":"第一個(gè)demoe",

"navigationBarTextStyle":"black"

},

"tabBar":{

"list":[

{

"pagePath":"pages/index/index",

"text":"首頁"

},

{

"pagePath":"pages/idig88/idig88",

"text":"詳情頁面"

}

]

},

"networkTimeout":{

"request":10000,

"downloadFile":10000

},

"debug":true

}修改index文件下的index.wxml和index.js了解數(shù)據(jù)綁定在微信小程序，不像之前的html那種結(jié)構(gòu)，這里得都是view容器的概念，要顯示什么首先要通過view容器的方式。<!--index.wxml-->

<view

class="container">

<text

class="user-motto">{{motto}}</text>

</view>每個(gè)js都必然有Page({})這種結(jié)構(gòu)data就是數(shù)據(jù)，里面有多個(gè)變量如果需要在頁面顯示綁定的數(shù)據(jù){{變量名稱}}//index.js

Page({

data:

{

motto:

'Hello

World',

userInfo:

{},

hasUserInfo:

false,

canIUse:

wx.canIUse('button.open-type.getUserInfo')

}

})index增加樣式新建index.wxss文件添加樣式名稱txt-test定義局頂部的距離，在微信小程序開發(fā)建議使用rpx，這個(gè)可以做到手機(jī)端的適配/*

pages/index/index.wxss

*/

.txt-test{

margin-top:

800rpx;

}引用css名稱為txt-test的樣式放入text容器內(nèi)<!--index.wxml-->

<view

class="container">

<text

class="txt-test">{{motto}}</text>

</view>注意這個(gè)txt-test就是私有的，index.wxml就是私有的html調(diào)用私有的樣式文件，也可以看到container他這個(gè)樣式就是在私有文件里面沒有而在最外層的app.wxss，它就去父節(jié)點(diǎn)最外層找，如果最外層有用，沒有也不報(bào)錯。注意這個(gè)txt-test就是私有的，index.