小程序開發中的一些坑和技巧
前言
最近公司要開發一款電商小程序，匆忙看了一遍文檔就開始幹活了。總體開發體驗我的感受不太好，特別是若是以前習慣了Vue開發，忽然去開發小程序，感受很雞肋。如下是我在開發中遇到的一些問題以及解決方法的總結，僅供參考css
引入iconfont
在小程序中引入字體圖標要比web麻煩一些，簡單說須要三步：html
下載iconfont，把iconfont.css複製到iconfont.wxss，在app.wxss中引入前端
查看iconfont在unicode模式下的在線連接，替換iconfont.wxss中的連接爲遠程連接node
- 在wxml文件中引入對應的icon class
<icon class="iconfont icon-pay"></icon>
使用less
vscode有一個easy less插件，是我感受使用less最簡單的方式git
vscode安裝easy less插件github
建立一個less目錄，用於存放less文件web
文件頭部添加編譯註釋
// out: ../pages/index/index.wxss, compress: true, sourceMap: falsejsonctrl + s保存後自動編譯小程序
編譯後的結果後端
按鈕重置
小程序中的按鈕功能強大，不少功能必需要用按鈕，好比彈出用戶受權，調用客服功能。默認的樣式通常沒法知足需求，能夠把按鈕樣式統一重置，而後本身寫樣式
button {
padding: 0;
background: #fff;
line-height: 0;
&::after {
border-color: transparent;
}
}
.button-hover {
background: #fff;
}
支持async-await
async-await是ES7的語法，截止我寫這篇文章爲止，小程序仍是不支持async-await語法的，因此須要使用regenerator-runtime這個庫
下載regenerator-runtime並放到utils目錄下
在util.js引入
import regeneratorRuntime from './regenerator-runtime/runtime-module'封裝wxRequest，讓它支持async-await
const wxRequest = async (url, params = {}) => {
Object.assign(params, {
token: wx.getStorageSync('token')
})
// 全部的請求，header默認攜帶token
let header = params.header || {
'Content-Type': 'application/json',
'token': params.token || ''
}
let data = params.data || {}
let method = params.method || 'GET'
// hideLoading能夠控制是否顯示加載狀態
if (!params.hideLoading) {
wx.showLoading({
title: '加載中...',
})
}
let res = await new Promise((resolve, reject) => {
wx.request({
url: url,
method: method,
data: data,
header: header,
success: (res) => {
if (res && res.statusCode == 200) {
resolve(res.data)
} else {
reject(res)
}
},
fail: (err) => {
reject(err)
},
complete: (e) => {
wx.hideLoading()
}
})
})
return res
}
export {
wxRequest
}
使用方法：
import regeneratorRuntime from '../../utils/regenerator-runtime/runtime-module.js'
import {
wxRequest
} from '../../utils/util.js'
Page({
data: {
list:[],
count: 0,
page: 1,
limit: 10
},
onLoad: function() {
this.getList()
// 請求已經結束 作其餘事
},
getList: async function() {
await wxRequest(app.globalData.baseUrl + '/test',{
hideLoading: true,
data: {
limit: this.data.limit,
page: this.data.page
}
}).then((ret) => {
this.setData({
list: ret.data.data,
count: ret.data.num
})
})
}
})
封裝以後用起來仍是很爽的，擴展起來也方便
動態設置data中某個值
應用場景：循環出來的列表，須要根據點擊項，動態改變列表中對應id的數據
// 動態傳遞id
<view catch:tap="onChangeName" data-id="1"></view>
Page({
data: {
list:[{
id: 0,
name: 'wang'
},{
id: 1,
name: 'li'
}]
},
onChangeName: function(event){
// 拿到id
let id = event.target.dataset.id
let key = `list[${id}].name`, val = 'zhang'
// 設置值
this.setData({
[key]: val
})
}
})
flex佈局，溢出省略號無效
訂單列表通常都是左邊一個圖片，右邊是標題或描述。這時候圖片寬度是固定的，標題長度自適應
.wrap {
display: flex;
}
.sub {
flex: 1;
width: 0; // 寬度設爲0
}
.sub text {
display: block; // 必定要設置成block
}
<view calss="wrap">
<image src="i.png"/>
<view class="sub">
<text>一段文本一段文本一段文本一段文本一段文本一段文本</text>
<view>其餘</view>
</view>
</view>
組件事件傳遞
任務：父組件向子組件傳遞初始數據，當子組件點擊之後能夠triggerEvent自定義事件，父組件執行自定義事件，從新請求數據並傳給子組件
/* 子組件 */
<view>
<view bind:tap="setId" data-id="1"></view>
</view>
properties: {
list: {
type: Array,
default: []
}
},
methods: {
setId(e) {
let id = e.currentTarget.dataset.id
this.triggerEvent('deleteFav', id)
}
}
/* 父頁面 */
<child bind:customEvent="deleteFav"></child>
data: {
list: []
},
deleteFav(e) {
let id = e.detail // 獲取傳遞過來的數據
// 根據id請求數據，而後從新setData
let newData = [1,2,3]
this.setData({
list: newData
})
}
使用wxParse解析HTML
- 下載wxParse，放到utils目錄下
- 在JS頁面引入：
import WxParse from '../../utils/wxParse/wxParse'
Page({
data:{
contentHTML:'' // 解析後的HTML
},
onLoad: function() {
// 請求到的HTML數據
let content = '<div>我是HTML代碼</div>', that = this;
WxParse.wxParse('contentHTML', 'html', content, that, 0);
}
})
- 顯示解析內容
<import src="../../utils/wxParse/wxParse.wxml"/>
<view>
<!-- 顯示內容 -->
<template is="wxParse" data="{{wxParseData:contentHTML.nodes}}" />
</view>
圖片等比例
image標籤有個mode屬性，能夠設置圖片如何顯示，若是文檔看的不仔細還真容易發現
<image src="test.png" mode="widthFix"/>
上拉加載和下拉刷新
{
"onReachBottomDistance": 0,
"enablePullDownRefresh": true
}
data: {
limit: 30,
page: 1,
list:[],
count:0
},
// 下拉
onPullDownRefresh: function () {
this.setData({
page: 1,
list:[]
})
this.getData()
},
// 上拉
onReachBottom: function () {
if(this.data.list.length >= this.data.count) {
return false
}
this.setData({
page: this.data.page + 1
})
this.getData()
wx.stopPullDownRefresh()
},
getData: async function () {
await wxRequest(app.globalData.baseUrl + '/test', {
data: {
page: this.data.page,
limit: this.data.limit,
}
}).then((ret) => {
let list = this.data.list.concat(ret.data.list)
this.setData({
list: list,
count: ret.data.count
})
})
}
上傳圖片
任務：小程序上傳圖片到服務器，最多上傳三張，前端能夠刪除圖片
效果圖以下
使用到的API有兩個：wx.uploadFile wx.chooseImage
示例WXML：
<view class="sale after-pic">
<block wx:for="{{imgList}}" wx:key="{{index}}">
<view class="pic">
<image src="{{item}}" />
<icon type="clear" size="20" catchtap="clearImg" data-id="{{index}}"/>
</view>
</block>
<image src="../../images/upload.png" catchtap="chooseImage" />
</view>
<button catchtap="onSub">提交</button>
imgList是wx.chooseImage成功後返回的圖片臨時地址
示例JS
Page({
data: {
imgList:[]
},
// 使用async await是由於圖片上傳是異步的
onSub: async function() {
// 點擊提交後，開始上傳圖片
let imgUrls = []
for (let index = 0; index < this.data.imgList.length; index++) {
await this.uploadFile(this.data.imgList[index]).then((res) => {
// 這裏要注意把res.data parse一下，默認是字符串
let parseData = JSON.parse(res.data)
imgUrls.push(parseData.data) // 圖片地址
})
}
console.log(imgUrls) // 3張圖片上傳成功後，執行其餘操做
},
// 刪除某張圖片
clearImg: function (params) {
let imgList = this.data.imgList
let id = params.currentTarget.dataset.id // 圖片索引
imgList.splice(id, 1) // 刪除
this.setData({
imgList: imgList
})
},
chooseImage: function (params) {
wx.chooseImage({
count: 3, // 作多3張
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
// 存儲臨時地址
this.setData({
imgList: res.tempFilePaths
})
}
})
},
uploadFile: function (filePath) {
// 返回Promise是爲了解決圖片上傳的異步問題
return new Promise( (resolve, reject) => {
wx.uploadFile({
url: app.globalData.baseUrl + '/file/upload', // 上傳地址
filePath: filePath,
name: 'file', // 這裏的具體值，問後端人員
formData: {},
header: {
"Content-Type": "multipart/form-data"
},
success: (res) =>{
// 圖片上傳成功後，後端會返回一個地址，能夠把它存到imgUrls
this.imgUrls.push(res.data.data)
},
fail:(err) => {
console.log(err)
}
})
})
}
})
動態標題
onLoad的時候動態設置標題
wx.setNavigationBarTitle({
title: '新標題'
})
結語
以上是僅爲我我的在開發過程當中遇到的一些問題，如有錯誤還請批評指正，感謝閱讀
相關文章
- 1. android開發的一些技巧和坑
- 2. 一些IOS開發中的小技巧
- 3. 小程序開發中的那些坑
- 4. 小程序開發中的一些實踐和踩坑
- 5. 開發中遇到的一些技巧和坑
- 6. 小程序開發有哪些坑（一）
- 7. 小程序開發技巧
- 8. 關於開發的一些小技巧
- 9. Android開發的那些坑和小技巧
- 10. JS開發中的一些小技巧和方法
- 更多相關文章...
- • Markdown 高級技巧 - Markdown 教程
- • 第一個MyBatis程序 - MyBatis教程
- • PHP開發工具
- • C# 中 foreach 遍歷的用法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. android開發的一些技巧和坑
- 2. 一些IOS開發中的小技巧
- 3. 小程序開發中的那些坑
- 4. 小程序開發中的一些實踐和踩坑
- 5. 開發中遇到的一些技巧和坑
- 6. 小程序開發有哪些坑（一）
- 7. 小程序開發技巧
- 8. 關於開發的一些小技巧
- 9. Android開發的那些坑和小技巧
- 10. JS開發中的一些小技巧和方法