乐趣区

关于小程序:小程序

jiezi

1. 反对 npm

http://cdevelopers.weixin.qq….

  1. 初始化:npm init
  2. 装置依赖项：npm install
  3. 装置实现后须要从新构建一次：小程序 IDE –> 构建 npm

2. promise 化

https://github.com/youngjunin…

app.js 内调用一次 

import {promisifyAll} from 'wx-promise-pro'
// promisify all wx‘s api
promisifyAll()


App({onLaunch() { },
  globalData: {}})

3. 反对 async await

https://developers.weixin.qq….

小程序编辑器内选中加强编译。

4. 网络申请

https://github.com/wendux/fly

微信小程序我的项目倡议间接下载源码到的小程序工程：

https://wendux.github.io/dist…


应用 Fly.jshttp 申请库, 编写公共申请 

const Fly = require('../lib/flyio')

const fly = new Fly()

fly.config.baseURL = 'http://127.0.0.1:7001/api'

fly.config.timeout = 6000

// 申请拦截器
fly.interceptors.request.use(request => {wx.showLoading({ title: '数据加载中...'})
  const token = wx.getStorageSync('token')
  if (token) {request.headers['token'] = `${token}`
  }
  return request
})

// 响应拦截器
fly.interceptors.response.use(
  // success
  (response) => {wx.hideLoading()
    return response.data || {}},
  // error
  (error) => {wx.hideLoading()
    const isErrMsg = error.response && error.response.data
    wx.showToast({
      title: isErrMsg ? error.response.data.msg || '服务器异样' : error.message,
      icon: 'none',
      duration: 3000
    })
  }
)
module.exports = {fly}

5. 引入 Vant Weapp

https://vant-contrib.gitee.io…

Vant webapp 反对 rpx

https://github.com/yingye/pos…


 npm install gulp --save-dev
 
 npm install gulp-postcss --save-dev
 
 npm install postcss-px2units --save-dev

新建 gulpfile.js

// gulpfile.js

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtounits =  require('postcss-px2units');

gulp.task('vant-css', function () {return gulp.src(['miniprogram_npm/@vant/weapp/**/*.wxss','!miniprogram_npm/@vant/weapp/common/index.wxss'])
   .pipe(postcss([pxtounits({
     multiple: 2,
     targetUnits: 'rpx'
   })]))
   .pipe(gulp.dest('miniprogram_npm/@vant/weapp/'));
});

疏忽 @vant/weapp/common/index.wxss，示意不解决 vant 的 1px 边框 CSS 代码。

package.json 中增加执行命令 


"scripts": {"px2rpx": "gulp vant-css"}

npm run px2rpx

如果后续没有用到的组件库，能够在 miniprogram_npm 目录删除多余的组件。

6. 全局款式

app.wxss


page {
  /* 设置全局字体 */
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
    sans-serif;  
  font-size:32rpx;        
}


view,
text,
input,
image,
button,
scroll-view,
cover-view {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

7. 自定义 tabbar

https://developers.weixin.qq….

  1. 在 app.json 中的 tabBar 项定义菜单和指定 custom 字段为 true
"tabBar": {
    "custom": true,
    "color": "#F4F5F5",
    "selectedColor": "#000000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "/static/images/tabBar/home.png",
        "selectedIconPath": "/static/images/tabBar/home_selected.png"
      },
      {
        "pagePath": "pages/sao/sao",
        "text": "扫码",
        "iconPath": "/static/images/tabBar/sao_selected.png",
        "selectedIconPath": "/static/images/tabBar/sao_selected.png"
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "/static/images/tabBar/my.png",
        "selectedIconPath": "/static/images/tabBar/my_selected.png"
      }
    ]
  }
  1. 增加 tabBar 代码文件, 在代码根目录下增加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

index.js 定义 tabBar 列表和抉择切换 


Component({
  data: {
    selected: null,
    tabBarList: [
      {
        pagePath: '/pages/index/index',
        iconPath: '/static/images/tabBar/home.png',
        selectedIconPath: '/static/images/tabBar/home_selected.png'
      },
      {
        pagePath: '/pages/sao/sao',
        text: '扫码',
        iconPath: '/static/images/tabBar/sao_selected.png',
        selectedIconPath: '/static/images/tabBar/sao_selected.png',
        isSpecial: true
      },
      {
        pagePath: '/pages/my/my',
        iconPath: '/static/images/tabBar/my.png',
        selectedIconPath: '/static/images/tabBar/my_selected.png'
      }
    ]
  },
  methods: {switchTab(e) {
      const data = e.currentTarget.dataset
      const index = data.index
      // 扫码
      if (index === 1) {
        wx.scanCode({success(res) {console.log(res)
          },
          fail(err) {console.log(err)
          }
        })
      } else {
        const url = data.path
        wx.switchTab({url})
        this.setData({selected: data.index})
      }
    }
  }
})

index.json

{"component": true}

index.wxml


<view class="tab-bar-wrap">
    <block wx:for="{{tabBarList}}" wx:key="pagePath">
        <!-- 扫码非凡布局 -->
        <view wx:if="{{item.isSpecial}}" class="tab-bar-nav" data-index="{{index}}" data-path="{{item.pagePath}}" bindtap="switchTab">
            <!-- 圆角 -->
            <view class="special-warp-border" />
            <view class="special-wrap">
                <image class="tab-bar-icon" src="{{item.iconPath}}" />
                <text>{{item.text}}</text>
            </view>
        </view>
        <view wx:else class="tab-bar-nav" data-index="{{index}}" data-path="{{item.pagePath}}" bindtap="switchTab">
            <image class="tab-bar-icon" src="{{selected === index ? item.selectedIconPath : item.iconPath}}" />
            <text>{{item.text}}</text>
        </view>
    </block>
</view>

index.wxss

.tab-bar-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 120rpx;
  box-shadow: 0 2rpx 12rpx 0 rgb(0, 0, 0, 0.3);
}
.tab-bar-nav {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  background-color: #fff;
}
.tab-bar-icon {
  width: 70rpx;
  height: 70rpx;
}

/* 扫码布局 */
.special-warp-border {
  position: absolute;
  border-radius: 50%;
  border: 2rpx solid #dcdfe6;
  top: -80rpx;
  background-color: #fff;
  box-sizing: border-box;
  width: 160rpx;
  height: 160rpx;
}

.special-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -50rpx;
}

最初在 index.js 和 my.js 定义 getTabBar() 选中性能，并在 onShow 里调用 

  onShow: function () {this.setTabBarSelected()
  },  
   // 设置自定义 tabBar 下标
   setTabBarSelected() {if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({selected: 0})
    }
  }

8. 自定义导航栏

设置 app.json navigationStyle

 "window":{"navigationStyle": "custom"}

https://developers.weixin.qq….

https://github.com/lingxiaoyi…

把代码间接复制下来，不便进行二次批改。

在 app.json 进行全局引入 

"usingComponents": {"nav-bar": "/components/nav-bar",}

而后在页面里就能够应用了 

<nav-bar title="我是题目"  color="#606266" background="#ffffff">
</nav-bar>

9. 地图上显示弹出层

在 cover-view 中应用 css 动画，显著有不晦涩景象。

退出移动版