小程序入門上午：
一敞临、小程序賬號申請：
1.1麸澜、到網(wǎng)站申請小程序開發(fā)賬號
注冊地址https://mp.weixin.qq.com/wxopen/waregister?action=step1
注冊界面下圖：
register.png
1.2炊邦、登錄賬號
登錄賬號，就可以在菜單 “設(shè)置”-“開發(fā)設(shè)置” 看到小程序的 AppID 了 窄俏。
setting.png
1.3凹蜈、打開界面
first-program.png
1.4忍啸、第一個程序计雌，默認(rèn)啟動模板
preview.jpg
二、通過代碼加深小程序目錄結(jié)構(gòu)的認(rèn)識
2.1妈橄、項目結(jié)構(gòu)
項目的結(jié)構(gòu)圖，通過該圖可以了解小程序中每個目錄的作用
progremTree.png
2.2、結(jié)構(gòu)圖
項目的結(jié)構(gòu)圖沙热，通過該圖可以了解小程序中每個目錄的作用
structure.png
三校读、微信小程序的“hello 小程序”
3.1、完成app層代碼,
在app.json中創(chuàng)建如下代碼蛾洛，json不支持文檔
{
"pages":[
"views/page1/page1"
]
}
app.js 設(shè)置
App({
/*
其他的方法如何調(diào)用
*/
foo(){
return "bar"
},
num:100,
data:{},
/**
* 當(dāng)小程序初始化完成時雁芙，會觸發(fā) onLaunch（全局只觸發(fā)一次）
* 在es6的時候： onLaunch可以省略
*/
onLaunch () {
console.log('onlaunch')
}
})
通過log日志看到代碼onLaunch被打印了 說明該方法走了
3.2兔甘、創(chuàng)建一個頁面
- 新建一個views文件夾，在views文件夾內(nèi)創(chuàng)建page1文件夾
page1文件夾里面創(chuàng)建page1.wxml
<!--wei xin markup language-->
<text>hello 微信</text>
編譯應(yīng)用 發(fā)現(xiàn)微信小程序能展示內(nèi)容
- 在同目錄下創(chuàng)建一個page1.js
// views/page1/page1.js
// 通過getApp方法拿到全局應(yīng)用程序?qū)ο?調(diào)用的是app.js里面的代碼
const app=getApp()
Page({
onLoad(){
const msg=app.foo()
console.log(msg)
console.log(app.data)
console.log(app.num)
}
}
)
- page1.wxss用于設(shè)置當(dāng)前頁面的css樣式
/* wei xin sheet style
定義在頁面里面的只能作用于當(dāng)前界面 */
text{
color: #f00;
background-color:#00f
}
四蟆淀、練習(xí)微信小程序如何實(shí)現(xiàn)頁面添加澡匪，值傳遞唁情，內(nèi)容展示
4.1、添加頁面
在app.json的全局配置頁面添加list頁面
{
"pages":[
"views/list/list",
"views/page1/page1"
]
}
4.2惦费、在list頁面創(chuàng)建list.js list.json list.wxml list.wxss文件抢韭，實(shí)現(xiàn)頁面內(nèi)值傳遞
在list.js的頁面創(chuàng)建頁面的全局對象
Page({
// 該對象的所有成員都可以被頁面訪問到
data:{
messsge: 'hello 小程序',
},
onLoad(){
// 改變數(shù)據(jù)并呈現(xiàn)到頁面上
this.setData(
{
messsge:Date.now()
}
)
}
})
4.3篮绰、獲取頁面js里面的數(shù)據(jù)對象
在list.wxml頁面獲取js文件的數(shù)據(jù)并展示到頁面在關(guān)于text等標(biāo)簽的用法參考
https://developers.weixin.qq.com/miniprogram/dev/component/
<text> {{messsge}}</text>
4.4、實(shí)現(xiàn)網(wǎng)絡(luò)請求
- 在list.js中創(chuàng)建一個網(wǎng)絡(luò)請求臀突，查看開發(fā)平臺的api
https://developers.weixin.qq.com/miniprogram/dev/api/
//獲取一個api中的數(shù)據(jù)，不要使用ajax api 因?yàn)閍jax的api是bom的 bom是基于bs架構(gòu)的 需要window窗口支持
// 我們使用微信的api 網(wǎng)絡(luò)請求的api 和jquery的特別像
const _this=this
wx.request({
url: 'http://t.yushu.im/v2/movie/in_theaters', // 僅為示例藕筋，并非真實(shí)的接口地址
data: {},
header: {
'content-type': 'application/json' // 默認(rèn)值
},
success(res) {
console.log(res.data)
_this.setData(
{
list:res.data.subjects
}
)
}
})
注意這個需要后臺的支持梳码，否則有可能拿不到數(shù)據(jù)：
https://blog.csdn.net/github_39570717/article/details/83272210
- 請求回來數(shù)據(jù)后通過模板文件遍歷并展示 在list.wxml文件中
<view>
<view class="item" wx:for="{{list}}">
<text>{{ item.title }}</text>
</view>
</view> -
如果想添加樣式 只需要在wxss類中添加即可
.item{
border: 1px solid red;
}
完整效果如下圖：
xiaochengxudemo1.png
