微信开发--微信小程序(一)

微信小程序开发相对于微信公众号的开发显得更为重要,下面就来简单介绍一下微信小程序的开发.

1. 注册

在微信公众平台注册微信小程序, 账号一定要不同于微信公众号的邮箱哦.

2. 下载

点击右上角的 "文档" ,在左侧找到 "开发者工具的使用",点击蓝色字体 "微信开发者工具", 下载稳定版的Windows64 ,可根据自己的实际下载.安装以后就可以用啦.

3. 创建

打开下载的 "微信web开发者工具" ,创建一个微信小程序项目.

打开微信小程序右上角的 "小程序开发" ,这里有详细的API文档可供参考.

4. 底部导航栏 tabBar

点击右上角的 "文档"后点击上侧导航栏的指南--基础能力--自定义tabBar

在 "微信开发者工具" 里的app.json 文件中全局配置:

"tabBar": {
    "color": "grey",
    //选中时字体的颜色
    "selectedColor": "#FF9900",
    //底部导航栏的背景色
    "backgroundColor": "#FFFACD",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "pages/images/home.png",
      "selectedIconPath": "pages/images/home1.png"
    },
    {
      "pagePath": "pages/list/list",
      "text": "列表",
      "iconPath": "pages/images/list.png",
      "selectedIconPath": "pages/images/list1.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "个人中心",
      "iconPath": "pages/images/mine.png",
      "selectedIconPath": "pages/images/mine1.png"
    }]
  }

在pages目录下新建两个目录作为导航栏跳转的两个页面,我分别取名 list , mine,这两个目录需要仿照index目录新建四个文件.

此时 app.json 文件 需要配置底部导航栏跳转的路径;

"pages": [
    "pages/index/index",
    "pages/list/list",
    "pages/mine/mine"
  ],

5. 顶部导航栏

很简单,参照文档就好,直接代码示例(因为我要写电影列表,因此只在list.json文件配置,其他页面暂时不需要) , 如果都需要,可以直接在 app.json文件的window中配置:

如果是在app.json文件中配置,再次在其他页面文件中配置时,在此页面app.json文件中的配置会被覆盖.

{
  "navigationBarBackgroundColor": "#439057",
  "navigationBarTitleText": "豆瓣电影",
  "navigationBarTextStyle": "white",
  "enablePullDownRefresh": true,
  "onReachBottomDistance":0
}

6. 电影列表(list目录)

首先在list.js文件写生命周期,(大写P,回车就好啦), 然后就是静态页面啦,布局啦,此处省略一万字.....

list.js文件发起请求,并把它赋值给自定义的变量,代码示例:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //电影列表数据
    movies:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.request({
      url: 'https://douban.uieee.com/v2/movie/top250',
      data: '',
      header: {
        "content-type":"json"
      },
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: res => {
        console.log(res);
        this.setData({
          movies:res.data.subjects
        })
      },
      fail: function(res) {},
      complete: function(res) {},
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

请求返回结果示例:

list.wxml遍历就好啦,代码示例:

<view class='container'>
<!-- 电影列表项 -->
  <view class='movie' wx:for="{{movies}}" wx:key="{{index}}">
    <navigator>
      <view class='movieItem'>
        <!-- 排名 -->
        <text class='rank'>No.{{index+1}}</text>
        <!-- 电影信息 -->
        <view class='item'>
          <!-- 左边 -->
          <view class='item-left'>
            <image src="{{item.images.small}}"></image>
          </view>
          <!-- 右边 -->
          <view class='item-right'>
            <text class='title'>{{item.title}}</text>
            <view>
              <i-rate value="{{item.rating.average/2.5}}" size="15">
                <text class='rate'>{{item.rating.average/2.5}}星</text>
              </i-rate>
            </view>
            <view class='time'>{{item.durations[0]}}</view>
            <view class='year'>{{item.pubdates[0]}}</view>
            <view class='act'>{{item.genres}}/{{item.directors[0].name}}/<text wx:for="{{item.casts}}" wx:key="{{index}}"> {{item.name}}</text></view>
          </view>
        </view>
      </view>
    </navigator>
  </view>
</view>

list.wxss文件 代码示例:

.movie{
  padding: 10rpx 20rpx;
}
.movieItem{
  border-bottom: 1rpx solid #ccc;
  padding: 20rpx 0;
}
.item{
  display: flex;
  margin-top: 10rpx;
}
.item-left{
  width: 25%;
  background-color: #F08080
}
.item-left image{
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}
.item-right{
  width: 70%;
  padding-left: 5%;
}
.rank{
  background-color: orange;
  border-radius: 10rpx;
  font-size: 36rpx;
  padding: 4rpx;
}
.item-right .title{
  font-size: 32rpx;
  font-weight: 600;
}
.item-right .time{
  color: #F08080;
  font-size: 30rpx;
}
.item-right .year{
  font-size: 30rpx;
  margin: 10rpx 0;
}
.item-right .act{
  background-color: #ccc; 
  font-size: 30rpx;
  border-radius: 7rpx;
}

小声逼逼: 上侧--真机调试,扫一扫可以在手机上预览哦.

电影列表效果图:

请自觉忽略它的样式......


用到更多: 电影列表的星星评分

iView Weapp -- 一套高质量的微信小程序 UI 组件库

1. 注册后进入首页,点击GitHub,下载dist文件夹,将dist文件夹直接放在项目的目录下,它是这样的:

然后进行全局配置, app.json:

{
"usingComponents": {
    "i-rate": "../../dist/rate/index"
  },
  ......
}

基本配置完成!

原文发布于微信公众号 - 生南星(gh_36d61425a5dc)

原文发表时间:2019-05-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券