github精选：微信小程序开发小结

发布者: 小赌 | 发布时间: 2017-3-24 03:44| 查看数: 9483| 评论数: 1|帖子模式

作者：yesifeng ，来自github原文地址

第一步项目配置

一、编写app.json

对整个项目的公共配置

1、pages：配置页面路径（必须），列出所有的页面的路径，所有存在的页面都需要在此写出，否则在页面跳转的时候会报出找不到页面的错误
2、window：窗口配置，配置导航及窗口的背景色和文字颜色，还有导航文字和是否允许窗口进行下拉刷新
3、tabBar：tab栏配置，配置tab栏背景色及出现位置，上边框的颜色（目前只支持黑或白），文字颜色及文字选中颜色，最核心的配置是list即tab栏的列表，官方规定最少2个，最多5个，每个列表项目可配置页面路径、文字、图标及选中时图标的地址
4、network：网络配置，配置网络请求、上传下载文件、socket连接的超时时间
5、debug：调试模式，建议开发时开启（true），可以看到页面注册、页面跳转及数据初始化的信息，另外报错的错误信息也会比较详细

{
  "pages": [
    "pages/popular/popular",
    "pages/coming/coming",
    "pages/top/top",
    "pages/search/search",
    "pages/filmDetail/filmDetail",
    "pages/personDetail/personDetail",
    "pages/searchResult/searchResult"
  ],
  "window": {
    "navigationBarBackgroundColor": "#47a86c",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText":  "电影推荐",
    "backgroundColor": "#fff",
    "backgroundTextStyle": "dark"
  },
  "tabBar": {
    "color": "#686868",
    "selectedColor": "#47a86c",
    "backgroundColor": "#ffffff",
    "borderStyle": "white",
    "list": [{
      "pagePath": "pages/popular/popular",
      "iconPath": "dist/images/popular_icon.png",
      "selectedIconPath": "dist/images/popular_active_icon.png",
      "text": "热映"
    }, {
      "pagePath": "pages/coming/coming",
      "iconPath": "dist/images/coming_icon.png",
      "selectedIconPath": "dist/images/coming_active_icon.png",
      "text": "待映"
    },{
      "pagePath": "pages/search/search",
      "iconPath": "dist/images/search_icon.png",
      "selectedIconPath": "dist/images/search_active_icon.png",
      "text": "搜索"
    },
    {
      "pagePath": "pages/top/top",
      "iconPath": "dist/images/top_icon.png",
      "selectedIconPath": "dist/images/top_active_icon.png",
      "text": "口碑"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

二、确定目录结构

根据UI图，提取组件和公共样式/脚本，以及page的目录

comm - 公用的脚本及样式
- script - 公共脚本
  - config.js 配置信息 （单页数据量，城市等）
  - fetch.js 接口调用 （电影列表及详情，人物详情、搜索）
- style - 公共样式
  - animation.wxss 动画
component - 公用的组件
- filmList - 电影列表
  - filmList.wxml - 组件结构
  - filmList.wxss - 组件样式
dist - 静态资源
- images 本地图片，主要存导航的图标 （样式中不可引用本地图像资源）
pages - 页面
- popular - 页面文件夹 （"popular"为自定义的页面名称，页面相关文件的文件名需与页面名相同）
  - popular.js 页面逻辑
  - popular.wxml 页面结构
  - popular.wxss 页面样式
  - popular.json 页面窗口配置 （可参考app.json中的window配置）
app.js - 小程序整体逻辑 （初始化、显示、隐藏的事件，以及存放全局数据）
app.json - 小程序公共配置
app.wxss - 小程序公共样式

第二步编写组件

电影列表

结构

<template name="filmList">
<block wx:if="{{showLoading}}">
    <view class="loading">玩命加载中…</view>
</block>
<block wx:else>
    <scroll-view scroll-y="true" style="height: {{windowHeight}}rpx" bindscroll="scroll" bindscrolltolower="scrolltolower">
        <view class="film">
            <block wx:for="{{films}}" wx:for-index="filmIndex" wx:for-item="filmItem" wx:key="film">
                <view data-id="{{filmItem.id}}" class="film-item" catchtap="viewFilmDetail">
                    <view class="film-cover">
                        <image src="{{filmItem.images.large}}" class="film-cover-img"></image>
                        <view class="film-rating">
                            <block wx:if="{{filmItem.rating.average == 0}}">
                                暂无评分
                            </block>
                            <block wx:else>
                                {{filmItem.rating.average}}分
                            </block>
                        </view>
                    </view>
                    <view class="file-intro">
                        <view class="film-title">{{filmItem.title}}</view>
                        <view class="film-tag">
                            <view class="film-tag-item" wx:for="{{filmItem.genres}}" wx:for-item="filmTagItem" wx:key="filmTag" data-tag="{{filmTagItem}}" catchtap="viewFilmByTag">
                                {{filmTagItem}}
                            </view>
                        </view>
                    </view>
                </view>
            </block>
            <block wx:if="{{hasMore}}">
                <view class="loading-tip">拼命加载中…</view>
            </block>
            <block wx:else>
                <view class="loading-tip">没有更多内容了</view>
            </block>
        </view>
    </scroll-view>
</block>
</template>

样式

import "../../comm/style/animation.wxss";
.film {
    box-sizing: border-box;
    width: 750rpx;
    padding: 10rpx;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    box-shadow: 0 0 40rpx #f4f4f4 inset;
}
.film-item {
    width: 350rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    box-shadow: 0 20rpx 40rpx #eee;
    overflow: hidden;
    animation: fadeIn 1s;
}
.film-cover, .film-cover-img {
    width: 350rpx;
    height: 508rpx;
}
.film-cover {
    position: relative;
    border-radius: 10rpx;
    overflow: hidden;
}
.film-rating {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50rpx;
    padding-right: 20rpx;
    font-size: 12px;
    text-align: right;
    line-height: 50rpx;
    background-color: rgba(0, 0, 0, .65);
    color: #fff;
}
.file-intro {
    padding: 16rpx;
    margin-top: -8rpx;
}
.film-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.film-tag {
    width: 100%;
    margin-top: 10rpx;
    display: flex;
    justify-content: flex-start;
}
.film-tag-item {
    padding: 4rpx 6rpx;
    margin-right: 10rpx;
    font-size: 24rpx;
    box-shadow: 0 0 0 1px #ccc;
    border-top: 1px solid #fff;
    border-radius: 10rpx;
    background-color: #fafafa;
    color: #666;
}
.loading-tip {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #ccc;
}

使用方法

以popular（热映）页面为例

在popular.wxml中插入以下代码引入组件结构：

<import src="../../component/filmList/filmList.wxml"/>
<template is="filmList" data="{{films: films, hasMore: hasMore, showLoading: showLoading, start: start, windowHeight: windowHeight}}"/>