最新时时彩平台演示 中新时时彩要不要交税 新时时彩三星组六技巧 最新时时彩源码修改 新时时彩遗漏走势图 新时时彩预测方法 新时时彩计算器 新时时彩开奖皇冠网址 新时时彩组三怎么玩 最新时时彩后四稳赚 新时时彩官方开奖网站 新时时彩人工计划 新时时彩开奖漏洞 新时时彩最长遗漏 新时时彩中奖顺序 360新时时彩技巧-轴承资讯 新时时彩停售 最新时时彩杀号高手 新时时彩三星走势图 玩新时时彩有什么技巧 新时时彩3星和尾走势 新时时彩后一公式 重新时时彩网站 新时时彩遗漏统计软件 吉林新时时彩走势图 新时时彩中奖怎么查 新时时彩是什么地方 新时时彩中奖怎么查 新时时彩下载手机版下载 新时时彩贴吧 最新时时彩计划软件 大赢家新时时彩 新时时彩注册送彩金 新时时彩组选投注技巧 新时时彩走势图 新时时彩万能5码 新时时彩模拟 新疆新时时彩往期开奖号码 新时时彩的玩法 新时时彩稳赚计划 最新时时彩70注 新时时彩返奖率 新时时彩杀号定胆360 新时时彩后二杀号 新时时彩振幅走势 最新时时彩教程 新时时彩后台软件 新时时彩几点开始 新时时彩日赚几百 最新时时彩注册送20
用户
 ?#19968;?#23494;码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序开发技巧总结

Rolan 2018-7-20 00:25

最近公司要开发一款电商小程序,匆忙看了一遍文档就开始干活了。整体开发体验个人感觉不太好,特别是如果之前习惯了Vue开发,突然去开发小程序,感觉很鸡肋。以下是?#20197;?#24320;发中遇到的一些问题以及解决方法的总结,仅 ...

最近公司要开发一款电商小程序,匆忙看了一遍文档就开始干活了。整体开发体验个人感觉不太好,特别是如果之前习惯了Vue开发,突然去开发小程序,感觉很鸡肋。以下是?#20197;?#24320;发中遇到的一些问题以及解决方法的总结,仅供参考

引入iconfont

在小程序中引入字体图标要比web麻烦一些,简单说需要三步:

  1. 下载iconfont,把iconfont.css复制到iconfont.wxss,在app.wxss中引入

  2. 查看iconfont在unicode模式下的在线链接,替换iconfont.wxss中的链接为远程链接

  1. 在wxml文件中引入对应的icon class
<icon class="iconfont icon-pay"></icon>
复制代码

使用less

vscode有一个easy less插件,是我感觉使用less最简单的方式

  1. vscode安装easy less插件

  2. 创建一个less目录,用于存放less文件

  3. 文件头部添加编译注释 // out: ../pages/index/index.wxss, compress: true, sourceMap: false

  4. ctrl + s保存后自动编译

编译后的结果

按钮重置

小程序中的按钮功能?#30475;螅?#24456;多功能必须要用按钮,比如弹出用户授权,调用客服功能。默认的样式一般无法满足需求,可以把按钮样式统一重置,然后自己写样式

button {
  padding: 0;
  background: #fff;
  line-height: 0;
  &::after {
    border-color: transparent;
  }
}
.button-hover {
  background: #fff;
}
复制代码

支持async-await

async-await是ES7的语法,截止我写这篇文章为止,小程序还是不支持async-await语法的,所以需要使用regenerator这个库

  1. 下载regenerator,并把regenerator-runtime并放到utils目录下

2. 在util.js引入 import regeneratorRuntime from './regenerator-runtime/runtime-module'
  1. 封装wxRequest,?#30431;?#25903;持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
      })
    })
  }
})
复制代码

封装之后用起来还是很爽的,扩展起?#21254;?#26041;便

动态设置data中某个值

应用场景:循环出来的列表,需要根据点击项,动态改变列表中对应id的数据

// 动态传递id
<block wx:for="{{list}}" wx:key="{{index}}">
  <view catch:tap="onChangeName" data-id="{{item.id}}"></view>
</block>

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>
复制代码

组件?#24405;?#20256;递

任务:父组件向子组件传递初始数据,当子组件点击以后可以triggerEvent自定义?#24405;?#29238;组件执行自定义?#24405;?#37325;新请求数据并传给子组件

/* 子组件 */
<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

  1. 下载 wxParse ,放到utils目录下
  2. 在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);
  }
})

复制代码
  1. 显示解析内容
<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: '新标题'
})
复制代码

结语

以上是仅为我个人在开发过程中遇到的一些问题,若有错误还请批评指正,感谢阅读.


鲜花
鲜花 (5)
鸡蛋
鸡蛋 (1)

刚表态过的朋友 (6 人)

分享至 : QQ空间
收藏
原作者: wmui 来自: 掘金

相关阅读

提示:本页有 2 个评论因未通过审核而被隐藏

  • w多妹doodoo99 2019-4-25 16:56
    12312312
  • warmylf 2019-3-28 15:32
    five
  • niuniu_0915 2018-12-4 10:09
    不好意思,点错了,怎么撤回啊?点成了鸡蛋。。。。
  • 开发工具 2018-9-29 10:27
    《微信小程序自动切片生成布局软件》原来?#20013;?#30340;这部?#27490;?#20316;,可以用切片软件的方法来?#23567;?#20999;好后,可以自动生成wxml,wcss,js文件。
    效果图上的文字可以通过自动文字识别识别出来,提高录入的速度,减轻工作量。
    设计好的切片文件可以存档,以便下次需要的时候拿来重新编辑。只要有切片文件在,换了程序?#37096;?#20197;秀给和编辑。
    有任?#25105;?#38382;欢迎随时联系我们!
    Q  Q : 2381547632
    勿喷!谢谢!
新时时彩软件
三昇体育客服端 北单推荐斯图加特Vs纽伦堡 拜仁慕尼黑纽伦堡 四灵在线客服 鸿运三分彩是正规的吗 广东十一选五快彩乐 莱特币矿池网站 红黑梅方透视 萨索洛v切沃分析 明日之后红杉镇探索宝箱在哪 电竞比分网app 雪诺和塞布尔电子