微信小程序笑话小程序实践开发学习

首先做出笑话展示页面

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>

 

其中的接口是别人写好的，只是调用，下面是实现的效果