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

首先做出笑话展示页面

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>

到此为止成功开发第二个页面