1, 跳转
- <navigator url=""></navigator>
- js
- wx.navigateTo(OBJECT)
- wx.redirectTo(OBJECT)
- 20170104135412294.png
2, 加载 loading
(1),<loading hidden="{{loadding}}"> 正在加载 </loading>
然后在 js 文件中控制 loadding 是否关闭
- (2),wx.showLoading({
- title: '玩命加载中',
- })
- wx.hideLoading();
3, 获取 url 参数
在 onLoad 方法中 options 对象保存
4,promise/post 封装
- const wxPromisify = fn => {
- return function(obj = {}) {
- return new Promise((resolve, reject) => {
- obj.success = function(res) {
- resolve(res)
- }
- obj.fail = function(res) {
- reject(res)
- }
- fn(obj)
- })
- }
- }
- // 封装 post 请求
- const post = (url, data) => {
- var promise = new Promise((resolve, reject) => {
- // 网络请求
- wx.request({
- url: url,
- data: data,
- method: 'POST',
- success: function(res) { // 服务器返回数据
- if (res.data.code == 1) {
- resolve(res);
- } else { // 返回错误提示信息
- reject(res.data);
- }
- },
- error: function(e) {
- reject('网络出错');
- }
- })
- });
- return promise;
- }
- module.exports = {
- wxPromisify: wxPromisify,
- post: post
- }
引用的时候
const { wxPromisify, post } = require('../../utils/promisfn.js')
5, 回到顶部
- //js
- data: {
- floorstatus: false, // 回到顶部是否存在
- },
- // 获取滚动条当前位置
- onPageScroll: function(e) {
- if (e.scrollTop> 100) {
- this.setData({
- floorstatus: true
- });
- } else {
- this.setData({
- floorstatus: false
- });
- }
- },
- // 回到顶部
- goTop: function(e) { // 一键回到顶部
- if (wx.pageScrollTo) {
- wx.pageScrollTo({
- scrollTop: 0
- })
- } else {
- wx.showModal({
- title: '提示',
- content: '当前微信版本过低, 无法使用该功能, 请升级到最新微信版本后重试.'
- })
- }
- },
- //wxml
- <image src='../../assets/img/top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
- //wxss 这些公用的可以放到 app.wxss
- .goTop {
- height: 80rpx;
- width: 80rpx;
- position: fixed;
- bottom: 50rpx;
- right: 30rpx;
- border-radius: 50%;
- }
6, 文章富文本解析 wxParse
wxParse
7, 服务器必须是 https, 包括图片, 还有就是背景图不能使用本地资源图片, 你可以使用服务器的, 或者是 base64
详细了解: 博客 https://www.yxlblog.com/view-908-1.html
来源: http://www.qdfuns.com/article/20013/4dbf2d26cd9ef1ceb945266a2fe375bf.html