一起开发微信小程序

每个小程序包含三个必不可少的文件
app.js app.json app.wxss
app.js: 脚本文件， 在这里监听并处理小程序的生命周期 以及全局变量
app.json:叫程序全局配置， 比如底部导航条样式， 窗口背景色，默认标题等
app.wxss: 全局样式表

官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

案例包含知识点：
默认请求必须为 https， 开发时手动开启调试即可在 http 环境下运行
上拉加载 下拉刷新
分享转发
自定义分享转发按钮
轮播图循环滚动
模版的使用
html解析转换为小程序可解析（借助于wxParser）

具体的不一一介绍， 看效果上代码

A231F8F7-6010-4F54-86B3-43741ECAD926.png WX20170713-183141@2x.png WX20170713-183520@2x.png

项目目录列表

WX20170713-184232.png

1、页面布局 底部导航 两个分类  
2、主页面 顶部 轮播滚动 列表

1、底部导航 由 app.json

页面路径
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ],
模版文件同样需要在app.json 声明， 首页 列表 item 使用
  "template": [
    "template/homeCell"
  ],

配置底部导航
"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#ff3366",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
        {
          "pagePath": "pages/index/index",
          "iconPath": "image/nav_home_normal.png",
          "selectedIconPath": "image/nav_home_selected.png",
          "text": "数英"
        },
        {
          "pagePath": "pages/logs/logs",
          "iconPath": "image/nav_my_normal.png",
          "selectedIconPath": "image/nav_my_selected.png",
          "text": "我"
        }
      ]
    },

另外可以配置 全部网络请求超时 networkTimeout  具体参照 开发文档

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

首页 
index.wxml

<import src="../../template/homeCell.wxml" />
//swiper  轮播控件   circular 属性 true 无限轮播
<swiper class="banner" circular="true" indicator-dots="true" indicator-active-color="#ffffff" autoplay="true" interval="4000" duration="1000">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item.cover}}" class="slide-image" data-conType="{{item.conType}}" data-cover="{{item.cover}}" data-conId="{{item.conId}}" bindtap="clickAction"/>
    </swiper-item>
  </block>
</swiper>
<block wx:for="{{items}}">
    <template is="homeCell" data="{{item}}"/>
</block>

//额外创建一个加载更多item
<view class="loadmore" >
  <text class="more_title">正在加载...</text>
</view>

//imgUrls  json 数组 
//这里点击图片需要传递参数  详情 类型  详情顶部图片  详情 id  
//传参方式 data-conType="{{item.conType}}" 注意 获取时候 小写  data.contype 如下 

  clickAction: function (event) {
    let data = event.currentTarget.dataset;
    console.log('****' + data.conid);
//点击打开新的页面并 传递参数
    wx.navigateTo({
      url: '../../pages/detail/detail?&conId=' + data.conid + '&cover=' + data.cover + '&conType=' + data.contype
    })
  },


//循环 创建 item。 这里 使用模版文件， 模版文件 如下 
<template name="homeCell">
  <view class="cell" data-conType="{{item.conType}}" data-cover="{{item.cover}}" data-conId="{{item.conId}}" bindtap="clickAction">
    <view class="con">
      <image class="cover" mode="scaleToFill" src="{{item.cover}}">
      </image>
      <view class="rightCon">
        <text class="title">{{item.title}}</text>
        <view class="control">
          <block wx:if="{{item.conType == '2'}}">
          <image class="zanorscore" src="../../image/common_small_star.png" mode="scaleToFill"></image>
          </block>
          <block wx:else>
          <image class="zanorscore" src="../../image/common_small_good.png" mode="scaleToFill"></image>
          </block>
          
          <text class="numtx">
          <block wx:if="{{item.conType == '2'}}">{{item.score}}</block>
          <block wx:else>{{item.zan}}</block>
          </text>
          <image class="collect" src="../../image/common_small_fav.png" mode="scaleToFill"></image><text class="numtx">{{item.zan}}</text>

          <block wx:if="{{item.conType == '2'}}">
            <image class="protag" src="../../image/project_tag.png"></image>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


详情页说明，  由于后台接口返回的是html。 故小程序 无法解析，可以使用wxparser第三方解析html。 
问题： 可能存在部分代码无法解析的问题（比如script标签， 可以使用正则过滤出你想显示的 部分， 然后调用wxparser）
以下是我的项目正则过滤
    wx.request({
      url: htmlUrl,
      success: function (data) {
        var str = data.data + "";
        var rlogo = str.match(/<img class=".* w_70".*\/>/).toString();
        var rname = rlogo.match(/title=".*"/).toString();
        pubName = rname.match(/[^(title=")].*[^(")]/).toString();
        if (rlogo.indexOf('jpg') >= 0) {
          pubAvatar = rlogo.match(/http.*jpg/).toString();
        } else {
          pubAvatar = rlogo.match(/http.*png/).toString();
        }
        var rtitle = str.match(/<title>.*<\/title>/).toString();
        rtitle = rtitle.match(/[^(<title>)].*[^(<\/title>)]/).toString();
        if (rtitle.indexOf('_文章_') >= 0) {
          title = rtitle.split('_文章_')[0].toString();
        } else if (rtitle.indexOf('_项目_') >= 0) {
          title = rtitle.split('_项目_')[0].toString();
        }

        that.setData({
          avatar: pubAvatar,
          title: title,
          pubName: pubName,
        });
        str = str.match(/<section class="content".*>/).toString();
        WxParse.wxParse('article', 'html', str, that, 20);
      },
      fail: function ({errMsg}) {
      }
    })
  },

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


知识点

1、下拉刷新 
在 index.json 中开启 pulldownRefresh
{
      "enablePullDownRefresh": true
}
刷新方法实现
  onPullDownRefresh: function () {
    // wx.showToast({
    //   title: 'loading...',
    //   icon: 'loading'
    // })
    page = 1;
    downloadPage(this);
  },
结束刷新
wx.stopPullDownRefresh();

2、上拉加载（滚动到底部）
onReachBottom: function () {
    page++;
    downloadPage(this);
  }

3、分享 方法实现 （实现此方法后，右上角菜单即可出现转发）
onShareAppMessage: function (res) {
    return {
      title: '数英-小程序',
      path: '/pages/index/index',  //分享路径， 可拼接参数
      success: function (res) {
      },
      fail: function (res) {
      }
    }
  }

4、注意， 如果想自定义按钮转发， 设置如下参数
<button open-type="share">
</button>