时间：2022-07-29 12:57:01 | 来源：网站运营
时间：2022-07-29 12:57:01 来源：网站运营
Web App（内嵌内浏览器打开指定网页）（2）微信、公众号、小程序
Native App（原生开发，也就是使用iOS和Android代码开发）
Hybrid App（混合APP开发，写DIV+CSS+JS+PHP代码开发）
在线咨询
a.定义路由（名词，指设置一个网址来访问文件）b.创建页面（js、wxss、wxml、json）c.修改wxml写结构（html）d.修改wxss写样式（css）-------------------------4.数据绑定a.修改js文件代码b.修改wxml文件绑定数据---------------shphp.wxml<!--pages/shphp/shphp.wxml--><view>【{{title}}】</view><view>当前页面：pages/shphp/shphp</view><view> 即可报名毕业 <text>薪资不达8K不收学费</text></view>shphp.js// pages/shphp/shphp.jsPage({ /** * 页面的初始数据 */ data: { title: "上海PHP学院" }, /** * 生命周期函数--监听页面加载 * 相当于window.onload */ onLoad: function (options) { }})6.数据遍历和判断：Page({ //初始化页面数据（data对象中的所有属性能被页面访问到） data: { title: '上海PHP学院', uname: '小泽', phpData: [ { title: '2018年PHP课程重磅升级', title2: '不8000就业不收学费' }, { title: '2018年PHP课程重磅升级', title2: '不8000就业不收学费' }, { title: '2018年PHP课程重磅升级', title2: '不8000就业不收学费' } ] }, /** * 生命周期函数--监听页面加载 * 相当于window.onload */ onLoad: function (options) { }})7.实现步骤Page({ //初始化页面数据（data对象中的所有属性能被页面访问到） data: { title: '上海PHP学院', uname: '波妞', phpData: [ { title: '2018年PHP课程重磅升级', title2: '不8000就业不收学费' }, { title: '2018年PHP课程重磅升级', title2: '不8000就业不收学费' }, { title: '2018年PHP课程重磅升级', title2: '不8000就业不收学费' } ] }, /** * 生命周期函数--监听页面加载 * 相当于window.onload */ onLoad: function (options) { }})shphp.wxml<!--pages/shphp/shphp.wxml--><view>【{{title}}】</view><view>当前页面：pages/shphp/shphp</view><view> 即可报名毕业 <text>薪资不达8K不收学费</text></view><view wx:if="{{uname == '波妞'}}"> 爱妃，寡人马上就到 </view><view wx:elif="{{uname == '小泽'}}"> 赶快洗白白 </view><view wx:elif="{{uname == '仓仓'}}"> 仓仓 </view><view wx:else> 爱卿退下 </view><view wx:for="{{phpData}}"> {{index}}: {{item.title}}</view>"pages":[ "pages/joke/joke", //笑话 "pages/picture/picture", //趣图 "pages/shphp/shphp", //上海PHP学院 "pages/index/index", //小程序Demo页 "pages/logs/logs" //小程序Demo页 ],window 配置页面窗口"window":{ "navigationBarBackgroundColor": "#268dcd", //导航栏背景 "navigationBarTitleText": "无聊笑话", //导航栏标题 "navigationBarTextStyle": "white", //导航栏标题颜色 "enablePullDownRefresh": true, //是否允许下拉刷新 "backgroundTextStyle": "light" //下拉框样式},tabBar 小程序底部导航"tabBar": { "color": "#000000", //底部菜单文字颜色 "selectedColor": "#268dcd", //底部菜单文字选中颜色 "backgroundColor": "#ffffff", //底部菜单背景颜色 "borderStyle": "white", //底部菜单边框颜色 "list": [ //菜单个数(至少两个生效) { "text": "笑话", "pagePath": "pages/joke/joke", "iconPath": "image/ic_joke_gray.png", //默认图标 "selectedIconPath": "image/ic_joke_blue.png" //选中图片}....}/**app.wxss**/.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;} .joke { margin: 10px; padding: 10px; border-radius: 5px; border-top: 1px solid #DEDEDE; border-left: 1px solid #DEDEDE; box-shadow: 2px 2px 2px #C7C7C7;}joke.wxml<!--pages/joke/joke.wxml--><view class="joke"> <view>笑话1</view> <view>2018-8-8</view></view><view class="joke"> <view>笑话1</view> <view>2018-8-8</view></view> 趣图页{ "pages": [ "pages/picture/picture", "pages/joke/joke", "pages/shphp/shphp", "pages/index/index", "pages/logs/logs" ], "window": { "navigationBarBackgroundColor": "#268dcd", "navigationBarTitleText": "无聊笑话", "navigationBarTextStyle": "white", "enablePullDownRefresh": true, "backgroundTextStyle": "light" }, "tabBar": { "color": "#000000", "selectedColor": "#268dcd", "backgroundColor": "#ffffff", "borderStyle": "white", "list": [ { "text": "笑话", "pagePath": "pages/joke/joke", "iconPath": "image/ic_joke_gray.png", "selectedIconPath": "image/ic_joke_blue.png" }, { "text": "趣图", "pagePath": "pages/picture/picture", "iconPath": "image/ic_gif_gray.png", "selectedIconPath": "image/ic_gif_blue.png" } ] }}// pages/picture/picture.jsPage({ /** * 页面的初始数据 */ data: { jokeList: [ { content: '笑话1', updatetime: '2018-8-8' }, { content: '笑话1', updatetime: '2018-8-8' }, { content: '笑话1', updatetime: '2018-8-8' } ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var thatObj = this; wx.request({ url: 'https://v.juhe.cn/joke/content/text.php?key=2ca3e19979fadf2279ac6a036669f5ad&page=1&pagesize=10', success: function (res) { console.log(res.data.result.data) thatObj.setData({ jokeList: res.data.result.data }); } }) },})joke.wxml <!--pages/joke/joke.wxml--><view class="joke" wx:for="{{jokeList}}"> <view> {{item.content}}</view> <view>{{item.updatetime}}</view></view>趣味图页面// pages/picture/picture.jsPage({ /** * 页面的初始数据 */ data: { jokeList: [ { content: '笑话1', updatetime: '2018-8-8', url: '' }, { content: '笑话1', updatetime: '2018-8-8', url: '' }, { content: '笑话1', updatetime: '2018-8-8', url: '' } ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var thatObj = this; wx.request({ url: 'https://v.juhe.cn/joke/img/list.php?key=2ca3e19979fadf2279ac6a036669f5ad&page=1&pagesize=10&sort=asc&time=1418745237 ', //仅为示例，并非真实的接口地址 success: function (res) { //console.log(res.data.result.data) thatObj.setData({ jokeList: res.data.result.data }); } }) },})picture.wxml<!--pages/picture/picture.wxml--><view class="joke" wx:for="{{jokeList}}"> <view> {{item.conotent}}</view> <view> <image src="{{item.url}}"></image> </view> <view>{{item.updatetime}}</view></view>关键词：程序,免费
