开发微信小程序

每个小程序包含三个必不可少的文件
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)

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

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>


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

本文作者2017-9-13 00:32
众观小程序
粉丝0 阅读16 回复0

精彩阅读

排行榜

小程序互动交流社区
181-2013-0473
周一至周五 9:00-18:00
意见反馈:79354359@qq.com

扫一扫联系我们