专栏首页生南星微信开发--微信小程序(一)

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

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

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),作者:生南星

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VueX详解

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.

    生南星
  • Vue动画与生命周期详解

    Vue为vue动画提供的六个类: transition标签的name-enter, transition标签的name-leave 动...

    生南星
  • 微信小程序项目小点一

    在微信小程序中,自定义导航栏的颜色 可以在app.json的window里面添加navigationBarBackgroundColor属性。

    生南星
  • Node+WebSocket+Vue聊天室: 界面美化,代码优化 – 第六章

    很自然,我们想到了flex布局,Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

    Javanx
  • 字节跳动Deep Retrieval召回模型笔记

    今天讲讲字节的一个召回的文章:《Deep Retrieval: An End-to-End Learnable Structure Model for Larg...

    黄鸿波
  • Android去除AlertDialog的按钮栏的分隔线

    在网上学习了一种继承系统AlertDialog然后用一统一方法控制dialog显示的方法,效果还不错,但按钮栏那里的分隔线并不是想要的。于是去查看sdk中的Al...

    砸漏
  • 推荐系统结合知识图谱简单总结

    链接 | https://zhuanlan.zhihu.com/p/59762355

    张小磊
  • 达观数据推荐算法实现:协同过滤之item embedding

    推荐系统本质是在用户需求不明确的情况下,解决信息过载的问题,联系用户和信息,一方面帮助用户发现对自己有价值的信息,另一方面让信息能够展现在对它感兴趣的用户面前,...

    达观数据
  • 详解基于内容的推荐算法

    本文介绍的将会是推荐系统最古老的算法:基于内容的推荐算法(Content-Based Recommendations CB)。

    机器学习算法工程师
  • Android项目实战(八):列表右侧边栏拼音展示效果

    听着music睡

扫码关注云+社区

领取腾讯云代金券