微信小程序笑话小程序实践开发学习
首先做出笑话展示页面
1.修改app.json文件，在”pages”中添加一条
“pages/joke/joke”,然后ctrl+s就可以自动创建joke文件夹，以及其中必须的三个文件，joke.js joke.json joke.wxml joke.wxss
2.在joke.wxml中写好需要显示的文字，并为其确认一个类
<view class=”joke”>
<view>笑话1</view>
<view>2019-2-18</view>
</view>
<view class=”joke”>
<view>笑话2</view>
<view>2019-2-19</view>
</view>
3.下面需要修改wxss来改变其样式
这里可以选择修改主文件的app.wxss或者修改joke.wxss
.joke{
margin:10px;
padding:10px;
border-radius:5px;
border-top:1px solid #DEDEDE;
border-left:1px solid #DEDEDE;
box-shadow: 2px 2px 2px #C7C7C7;
}
这样也就完成了第一个页面的开发
下面尝试带图页面
其实方法与第一个页面相同，这里主要考虑加入图片的部分，需要设置一个image文件存放原来下载好的图片，然后用和之前相同的方式，只不过在wxml里面需要放置一个image的双标签：
<view class=”joke”>
<view>笑话1</view>
<view>
<image src=”/image/1.png”></image>
</view>
<view>2019-2-18</view>
</view>
<view class=”joke”>
<view>笑话2</view>
<view>
<image src=”/image/2.jpg”></image>
</view>
<view>2019-2-19</view>
</view>
到此为止成功开发第二个页面
下面尝试通过底部菜单进行两个页面的转化，并改变上面菜单
只需要修改app.json即可
最后效果为：
app.json代码修改为：
{
“pages”:[
“pages/picture/picture”,
“pages/joke/joke”,
“pages/shphp/shphp”,
“pages/index/index”,
“pages/logs/logs”
],
“window”:{
“backgroundTextStyle”:”light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “幽默笑话”,
“navigationBarTextStyle”:”black”,
“enablePullDownRefresh”:true
},
“tabBar”:{
“color”:”#000000″,
“selectedColor”:”#268dcd”,
“backgroundColor”:”#ffffff”,
“borderStyle”: “white”,
“list”:[
{
“text”:”笑话”,
“pagePath”:”pages/joke/joke”,
“iconPath”:”image/5.jpg”,
“selectedIconPath”:”image/4.jpg”
},
{
“text”: “趣图”,
“pagePath”: “pages/picture/picture”,
“iconPath”: “image/5.jpg”,
“selectedIconPath”: “image/4.jpg”
}
]
}
}
需要注意的是list菜单中的东西至少需要有2个，否则无法显示
到此完成了可以转换的功能
下面尝试调用接口，首先需要先学会写请求
https://developers.weixin.qq.com/miniprogram/dev/api/wx.request.html
照着官方文档书写即可
这个主要是改joke.js和joke.wxml就可以
.js的修改部分：
data: {
jokeList:[
{content:”笑话1″,updatetime:””},
{ content: “笑话1”, updatetime: “”},
{ content: “笑话1”, updatetime: “” }
]
},
/**
* 生命周期函数–监听页面加载
*/
onLoad: function (options) {
var thatObj=this;
wx.request({
url: ‘https://v.juhe.cn/joke/content/text.php?key=2ca3e19979fadf2279ac6a036669f5ad&page=1&pagesize=6#92019-02-17 17:57回复’, // 仅为示例，并非真实的接口地址
success(res) {
//console.log(res.data.result.data)
//将获取到的数据赋值
thatObj.setData({
jokeList:res.data.result.data
})
}
})
},
.wxml的修改部分
<view class=”joke” wx:for=”{{jokeList}}”>
<view>{{item.content}}</view>
<view>{{item.updatetime}}</view>
</view>
其中的接口是别人写好的，只是调用，下面是实现的效果
版权声明：本文为wangziyan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。