样式方面无需说明，这里说一下数据请求的封装。分别在busi/util文件夹新建文件request.js和api.js（非必须），其中request.js基于fly库封装（考虑到weex官方的数据请求库有点坑，在此弃用），便于管理后端接口建议在api.js文件中统一管理。

以下为fly.js库的封装，具体使用参照fly.js官方文档，如果需要增加登录拦截什么的，可以在fly.interceptors.request.use中增加即可。

//request.js
var Fly = require("flyio/dist/npm/weex");
var fly = new Fly;

//bmob云数据库的配置，非必须
const bmobConfig = {
  applicationId:'applicationId',
  restApiKey:'restApiKey',
  secretKey:'secretKey',
  masterKey:'masterKey'
}

var progress = weex.requireModule("progress")
var modal = weex.requireModule("modal")
//添加请求拦截器
fly.interceptors.request.use((request)=>{
  progress.show();
  //给所有请求添加自定义header
  request.headers["X-Tag"]="flyio";
  request.headers['X-Bmob-Application-Id'] = bmobConfig.applicationId;
  request.headers['X-Bmob-REST-API-Key'] = bmobConfig.restApiKey;
  request.headers['Content-Type'] = 'application/json';  
  //可以显式返回request, 也可以不返回，没有返回值时拦截器中默认返回request
  return request;
})

//添加响应拦截器，响应拦截器会在then/catch处理之前执行
fly.interceptors.response.use(
  (response) => {
      //只将请求结果的data字段返回
      progress.dismiss();
      return response.data
  },
  (err) => {
      //发生网络错误后会走到这里
      progress.dismiss();
      //return Promise.resolve("ssss")
  }
)

module.exports  = fly;

以下为后端接口统一管理文件api.js

/**
 * @description 请求地址
 */

const baseUrl = 'http://baidu.com/';
const urls = {
  videoList:'videoList',
  videoContent:'videoContent',
  amapGetaddress:'amapGetaddress',//高德地图经纬度转地址
  home: baseUrl + 'home',//首页
  categoryIndex:baseUrl+'categoryIndex',//菜单分类 type=list显示
  categoryList:baseUrl+'categoryList',//参数cid通过categoryIndex获得 page为分页
  tagList:baseUrl+'tagList',//标签列表&id=7656&page=1
  articleDetails:baseUrl+'articleDetails',//文章详情
  about:'about',//关于
  search:baseUrl+'search',//&q=周杰伦&page=1
};
export default urls

数据请求实例，用过axios库的应该很熟悉这种写法

getData() {
    const that = this;
    fly.get(apis.home, {})
    .then(res => {
        let bannerList = [];
        JSON.parse(res).article_hot.data.map((item,index)=>{
            item.pic = item.pic.src;
            bannerList.push(item)
        })
        that.bannerList = bannerList;
        that.newsItems = JSON.parse(res).article_list;
    })
    .catch(error => {});
}

参考文档

• weex官方文档 https://weex.incubator.apache.org/cn/
• weexplus文档 https://weexplus.github.io/doc/
• weexplus github仓库 https://github.com/weexplus/boilerplate
• weexplus安卓端扫码调试包下载 https://pan.baidu.com/s/16kJfMuyXX-Y_yhm5fHt79Q

一点私货

基于同一套ui开发出来的爱尚吉他微信小程序版已经上线喜欢弹吉他的小伙伴可以关注一波