<i id='eaf1olsh'><tr id='9eak4kfw'><dt id='e22b8bdx'><q id='gn7qjy0z'><span id='wyc4egf1'><b id='rp6ujp01'><form id='c1ewgpds'><ins id='i1jq6j4s'></ins><ul id='o7ay67e6'></ul><sub id='7452sy2f'></sub></form><legend id='fvfleez8'></legend><bdo id='ozpl0kzt'><pre id='34xaezbd'><center id='5mx6zy1f'></center></pre></bdo></b><th id='pngu8c2n'></th></span></q></dt></tr></i><div id='e5jbtqw0'><tfoot id='mzsk7ixw'></tfoot><dl id='7q4n8v2i'><fieldset id='ev1k2f5c'></fieldset></dl></div>

<small id='2h4xg1u4'></small><noframes id='laaf5hu2'>

    <tfoot id='1uyrp5u1'></tfoot>

    • <legend id='atssq74q'><style id='6oqbabsb'><dir id='attseobf'><q id='19i8uung'></q></dir></style></legend>

        <tbody id='rqw78bfa'></tbody>
    • 网站建设公司当前位置 : 网站建设公司 > 知识普及

      小程序开发技巧总结

      发布时间:2022-03-04 17:08   浏览次数:次   
      前言
      最近公司要开发一款电商小程序,匆忙看了一遍文档就开始干活了。整体开发体验个人感觉不太好,特别是如果之前习惯了Vue开发,突然去开发小程序,感觉很鸡肋。以下是我在开发中遇到的一些问题以及解决方法的总结,仅供参考
       
      引入iconfont
      在小程序中引入字体图标要比web麻烦一些,简单说需要三步:
       
      下载iconfont,把iconfont.css复制到iconfont.wxss,在app.wxss中引入
       
      查看iconfont在unicode模式下的在线链接,替换iconfont.wxss中的链接为远程链接
       
       
       
       
       
       
       
       
       
      在wxml文件中引入对应的icon class
      使用less
      vscode有一个easy less插件,是我感觉使用less最简单的方式
       
      vscode安装easy less插件
       
      创建一个less目录,用于存放less文件
       
      文件头部添加编译注释 // out: ../pages/index/index.wxss, compress: true, sourceMap: false
       
      ctrl + s保存后自动编译
       
       
       
       
       
       
       
       
       
      编译后的结果
       
       
       
       
       
       
       
       
       
      按钮重置
      小程序中的按钮功能强大,很多功能必须要用按钮,比如弹出用户授权,调用客服功能。默认的样式一般无法满足需求,可以把按钮样式统一重置,然后自己写样式
       
      支持async-await
      async-await是ECMA2017(ES8)的语法,截止我写这篇文章为止,小程序还是不支持async-await语法的,所以需要使用regenerator这个库
       
      下载regenerator,并把regenerator-runtime并放到utils目录下
       
       
       
       
       
       
      2. 在util.js引入import regeneratorRuntime from './regenerator-runtime/runtime-module'
       
       
       
      封装wxRequest,让它支持async-await
      使用方法:
       
      封装之后用起来还是很爽的,扩展起来也方便
       
      动态设置data中某个值
      应用场景:循环出来的列表,需要根据点击项,动态改变列表中对应id的数据
       
      flex布局,溢出省略号无效
      订单列表一般都是左边一个图片,右边是标题或描述。这时候图片宽度是固定的,标题长度自适应
       
      组件事件传递
      任务:父组件向子组件传递初始数据,当子组件点击以后可以triggerEvent自定义事件,父组件执行自定义事件,重新请求数据并传给子组件
       
      使用wxParse解析HTML
      下载wxParse,放到utils目录下
      在JS页面引入:import WxParse from '../../utils/wxParse/wxParse'
      显示解析内容
      图片等比例
      image标签有个mode属性,可以设置图片如何显示,如果文档看的不仔细还真容易发现
       
      上拉加载和下拉刷新
      上传图片
      任务:小程序上传图片到服务器,最多上传三张,前端可以删除图片
       
      效果图如下
       
       
       
       
       
       
       
       
       
      使用到的API有两个:wx.uploadFile wx.chooseImage
       
      示例WXML:
       
      imgList是wx.chooseImage成功后返回的图片临时地址
       
      示例JS
       
      动态标题
      onLoad的时候动态设置标题
       

        • <i id='0y0fuc6g'><tr id='6q0a4sqy'><dt id='29udsnwp'><q id='mc5lxgtu'><span id='0c3s7o2u'><b id='26073q7o'><form id='0fspqz0g'><ins id='t7vegpdo'></ins><ul id='um7vsjmm'></ul><sub id='z05tzazp'></sub></form><legend id='uakwyubs'></legend><bdo id='2hd1izs0'><pre id='hxl1a4fw'><center id='73zjfldj'></center></pre></bdo></b><th id='90s4pklu'></th></span></q></dt></tr></i><div id='rm7ail9i'><tfoot id='b37c7n7h'></tfoot><dl id='8ge7l3tn'><fieldset id='doss8zm6'></fieldset></dl></div>
            <tbody id='ew8540gv'></tbody>
        • <legend id='lgl005nn'><style id='i58k0xui'><dir id='cdqxdfha'><q id='x4sd8uef'></q></dir></style></legend>
            <tfoot id='2upc4aki'></tfoot>

            <small id='rr4hflbm'></small><noframes id='9m9q6rb1'>

          • 本文来源于网络,若有侵权请联系3449817223#qq.com,将在第一时间删除。

            下一篇公众号开发下一篇:没有了

            <small id='wi8he94k'></small><noframes id='fb0qdz3f'>

                <tbody id='wgjrb7ck'></tbody>
                <tfoot id='x0pgv2de'></tfoot><legend id='mz526oww'><style id='axnyj4mv'><dir id='vhfa1frs'><q id='rc9t9f28'></q></dir></style></legend>

              • <i id='26jqdpmv'><tr id='4ug5pty8'><dt id='twpuob6r'><q id='zzgwomdl'><span id='okk0xayb'><b id='t36aeu1p'><form id='yn71if3n'><ins id='48wmg5tr'></ins><ul id='560oqf35'></ul><sub id='fovrwt69'></sub></form><legend id='ga27is1o'></legend><bdo id='j1b4b12n'><pre id='bh3owxmh'><center id='ymmnbhws'></center></pre></bdo></b><th id='vpcvwkx7'></th></span></q></dt></tr></i><div id='phlayeub'><tfoot id='dnhogs2u'></tfoot><dl id='hp2hp6yt'><fieldset id='myngs9oy'></fieldset></dl></div>