小程序入门上午：
一、小程序账号申请：
1.1、到网站申请小程序开发账号
注册地址https://mp.weixin.qq.com/wxopen/waregister?action=step1
注册界面下图：
register.png
1.2、登录账号
登录账号，就可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。
setting.png
1.3、打开界面
first-program.png
1.4、第一个程序，默认启动模板
preview.jpg
二、通过代码加深小程序目录结构的认识
2.1、项目结构
项目的结构图，通过该图可以了解小程序中每个目录的作用
progremTree.png
2.2、结构图
项目的结构图，通过该图可以了解小程序中每个目录的作用
structure.png
三、微信小程序的“hello 小程序”
3.1、完成app层代码,
在app.json中创建如下代码，json不支持文档
{
"pages":[
"views/page1/page1"
]
}
app.js 设置
App({
/*
其他的方法如何调用
*/
foo(){
return "bar"
},
num:100,
data:{},
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
* 在es6的时候： onLaunch可以省略
*/
onLaunch () {
console.log('onlaunch')
}
})
通过log日志看到代码onLaunch被打印了 说明该方法走了
3.2、创建一个页面
- 新建一个views文件夹，在views文件夹内创建page1文件夹
page1文件夹里面创建page1.wxml
<!--wei xin markup language-->
<text>hello 微信</text>
编译应用 发现微信小程序能展示内容
- 在同目录下创建一个page1.js
// views/page1/page1.js
// 通过getApp方法拿到全局应用程序对象,调用的是app.js里面的代码
const app=getApp()
Page({
onLoad(){
const msg=app.foo()
console.log(msg)
console.log(app.data)
console.log(app.num)
}
}
)
- page1.wxss用于设置当前页面的css样式
/* wei xin sheet style
定义在页面里面的只能作用于当前界面 */
text{
color: #f00;
background-color:#00f
}
四、练习微信小程序如何实现页面添加，值传递，内容展示
4.1、添加页面
在app.json的全局配置页面添加list页面
{
"pages":[
"views/list/list",
"views/page1/page1"
]
}
4.2、在list页面创建list.js list.json list.wxml list.wxss文件，实现页面内值传递
在list.js的页面创建页面的全局对象
Page({
// 该对象的所有成员都可以被页面访问到
data:{
messsge: 'hello 小程序',
},
onLoad(){
// 改变数据并呈现到页面上
this.setData(
{
messsge:Date.now()
}
)
}
})
4.3、获取页面js里面的数据对象
在list.wxml页面获取js文件的数据并展示到页面在关于text等标签的用法参考
https://developers.weixin.qq.com/miniprogram/dev/component/
<text> {{messsge}}</text>
4.4、实现网络请求
- 在list.js中创建一个网络请求，查看开发平台的api
https://developers.weixin.qq.com/miniprogram/dev/api/
//获取一个api中的数据，不要使用ajax api 因为ajax的api是bom的 bom是基于bs架构的 需要window窗口支持
// 我们使用微信的api 网络请求的api 和jquery的特别像
const _this=this
wx.request({
url: 'http://t.yushu.im/v2/movie/in_theaters', // 仅为示例，并非真实的接口地址
data: {},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
_this.setData(
{
list:res.data.subjects
}
)
}
})
注意这个需要后台的支持，否则有可能拿不到数据：
https://blog.csdn.net/github_39570717/article/details/83272210
- 请求回来数据后通过模板文件遍历并展示 在list.wxml文件中
<view>
<view class="item" wx:for="{{list}}">
<text>{{ item.title }}</text>
</view>
</view> -
如果想添加样式 只需要在wxss类中添加即可
.item{
border: 1px solid red;
}
完整效果如下图：
xiaochengxudemo1.png
