作者

现如今微信小程序开发可以说相当火爆。那么让我们来体验一下如何开发一个属于自己的小程序吧~

小程序是一种新的开放能力,开发者可以快速地开发一个小程序小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

一、开发环境要求

为了帮助开发者简单和高效地开发和调试微信小程序,微信官方在网页调试工具的基础上,推出了微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。

首先我们去官网下载开发者工具并安装,安装好后如下图:

二、建立一个属于自己的小程序Demo

1.打开微信开发者工具之后,你会看到一个二维码,只需要用自己的微信扫一下那个二维码就会看到下图的登录验证,点击确认登录就好啦~

2.登录之后你会看到如下界面(选择左边的小程序项目):

3.选择小程序项目之后你就会看见下图,按照下图配置,再点击确定:

4.点击确定后会帮你生成一个项目结构,会见到下图:

三、框架及组件

如果你想要写一个简单的列表,那么可以参考我们为你准备的代码,主要的组件还是要参考小程序开发文档噢~

修改index.wxml

<view class="content">
  <view class='list'>
    <view class='list-item' wx:for='{{topics}}' wx:key='item.id'>
        <view class='img-box list-child'>
          <image src="{{item.user.avatar_url}}"></image>
        </view>
        <view class='title list-child'>
          <view class='title-top'>
            <text>分类</text> {{item.title}}
          </view>
          <view class='author'>{{item.user.name}}</view>
        </view>
        <view class='count list-child'>55</view>
    </view>
  </view>
</view>

修改index.js

Page({
  data: {
    topics: [],
  },
  onLoad() {
    this.init()
  },
  init() {
    wx.request({
      url: `https://ruby-china.org/api/v3/topics.json`, //示例接口为RubyChina官网提供的接口
      success: (res) => {
        console.log(res)
        this.setData({
          topics: res.data.topics
        })
      }
    })
  },
})

修改index.wxss

.list{
  box-sizing: border-box;
  padding: 30rpx;
  font-size:32rpx
}

.list-item{
  display: flex;
  margin: 10rpx
}

.img-box{
  flex-basis: 100rpx;
}

.title{
  flex:1
}

.img-box image{
    border-radius: 50rpx;
  width: 80rpx;
  height:80rpx;
}

修改好代码之后,你就可以看到一个基础的数据列表页面啦~ 是不是很简单?快去开发一个属于你自己的小程序吧!

参考文献(小程序开发文档):https://developers.weixin.qq.com/miniprogram/dev/index.html

转载请注明,来自https://itfun.tv/news/122