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