小程序高级实战开发

hellowoody 发布于2019-06-28 18:45 / 2885人阅读

摘要：微信基本组件的高级解读数据绑定，记住使用列表，使用，同时设置好。在使用组件，尤其是组件套组件时，特别注意此类事件。不设置该方法，页面不支持分享如何发送模板消息小程序需要做什么在小程序段必须使用，获取到并和其他数据一起传给服务器。

1.微信基本组件的高级解读

数据绑定，记住使用{{}}

列表，使用wx:for，同时设置好wx:key。不然，编辑器总是有红色警告。

条件，使用wx:if,wx:else or wx:elif

模板不建议大量使用用，因为无法使用自己的样式

事件，强记下哪些冒泡事件和非冒泡事件。在使用组件，尤其是组件套组件时，特别注意此类事件。

引入，import = 引入模板文件，include = 复制文件源码， @import 引入样式文件

wxss，理解并使用rpx来替代px

2.自定义组件的使用 a 自定义组件的使用场景

可以抽象，并重复使用的就可以做成组件。
比如：分享组件、Tab组件、Pannel组件等等。

b 示例

***组件使用，支持服务器下发分享按钮文本和分享内容***

***share.js***
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    text: {
      type: String,
      value: "分享给好友"
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onTapButton (e) {
      this.triggerEvent("tapbutton", {e})
    }
  }
})

***share.wxml***

***share.wxss***
@import "../../static/wxss/common.wxss";
.button {
  background: linear-gradient(#AEAEF9, #9ED1FA);
  box-shadow: 1rpx 1rpx 1rpx 1rpx #C28230;
    position: fixed;
  align-content: center;
    bottom: 30rpx;
    width: 30%;
  height: 60rpx;
  border-radius: 30rpx;
  font-size: 30rpx;
  margin: 0 35%;
  color: white;
  line-height: 60rpx;
}

效果图

3.目录结构规划

4.常用组件的封装 b 请求api

***使用***
// 获取金币收入列表
var Request = require("request.js")
function getIncome(page = 1, success) {
  var url = Common.API + "/User/MyIncome/" + page
  Request.Get(url, success)
}

***request.js***
function Get(url, success, err = errhandle, header = HEADER) {
  ShowLoading()
  return wx.request({
    url: url,
    success: function (res) {
      // console.log("geturl", res)
      wx.hideLoading()
      if (res.statusCode != 200) {
        err(res.data)
        return
      }
      success(res.data.data)
    },
    header: header
  })
}

function Post(url, data, success, err = errhandle, header = HEADER) {
  wx.hideLoading()
  return wx.request({
    url: url,
    data: data,
    method: "POST",
    success: function (res) {
      wx.hideLoading()
      if (res.statusCode != 200) {
        err(res.data)
        return
      }
      success(res.data.data)
    },
    header: header
  })
}

module.exports = {
  Get: Get,
  Post: Post
}

c 分享组件

见本文

5.生命周期分析

onLoad：初始化数据，包括：从服务器获取页面数据

onReachBottom：可用于，列表加载下一页。

onShareAppMessage：设置页面分享数据。不设置该方法，页面不支持分享

6.如何发送模板消息 a 小程序需要做什么

在小程序段必须使用form，获取到form_id,并和其他数据一起传给服务器。

b 后端需要如何操作

在小程序后台申请模板消息，发送消息是带上form_id.

*** php代码示例，使用lavavel框架，和easywechat组件 ***
public static function SendTpl($uid, $coin, $formId, $page = "pages/index/index")
    {
        $find = User::find($uid);
        if ($find) {
            $data = [
                "touser" => $find->openid,
                "template_id" => "Bg7IEAsOqXhFsjkcu3Wdz7Im6HTbBYIdgq_T9EnfcSY",
                "page" => $page,
                "form_id" => $formId,
                "data" => [
                    "keyword1" => "您有一笔金币入账",
                    "keyword2" => $coin . "金币",
                    "keyword3" => "哇~有这么多金币呢~~赶快到商店里看看，可以兑换好东西哦~"
                ]
            ];
            $miniprogram = EasyWeChat::miniProgram();
            $miniprogram->template_message->send($data);
        }
    }

7.巧计 a 片段代码的使用技巧 b 与后端的安全认证 8.遇到的一些坑 a 定义在tabbar的页面，不能使用wx.navigateTo 应该使用wx.switchTab b 在小程序外，如何带参数？以及如何获取参数？

pages/index/index?pid=12直接在页面后带参数

获取参数：

onLoad: function (options) {
  if (options.pid) {
      this.apprentice(options.pid)
    }
}

c 组件内列表场景下，点击按钮，如何带上所选行参数？

** js组件的方法列表**
  methods: {
    onTapButton(e) {
      var detail = e.detail.target.dataset.detail
      detail["formId"] = e.detail.formId ? e.detail.formId : ""
      console.log("tapbutton", e, detail)
      this.triggerEvent("tapbutton", { detail: detail, event: e }) // , formId: formId
    }
  }

*** wxml ***

***页面使用***
bindExchange (e) {
    app.aldstat.sendEvent("商城-商品-" + e.detail.detail.title);
    wx.navigateTo({
      url: "../exchange/exchange"
    })
  }

d 自定义组件，组件内的样式如果需要使用公共样式，需要多带带引入。

GPU云服务器云服务器高级php的实战开发嵌入式linux驱动程序实战开发开发小程序程序开发小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/28617.html

小程序高级实战开发

摘要：微信基本组件的高级解读数据绑定，记住使用列表，使用，同时设置好。在使用组件，尤其是组件套组件时，特别注意此类事件。不设置该方法，页面不支持分享如何发送模板消息小程序需要做什么在小程序段必须使用，获取到并和其他数据一起传给服务器。 showImg(https://segmentfault.com/img/remote/1460000014423859); 1.微信基本组件的高级解读数...

Ajian 2019-08-22 16:23 评论0 收藏0
小程序高级实战开发

摘要：微信基本组件的高级解读数据绑定，记住使用列表，使用，同时设置好。在使用组件，尤其是组件套组件时，特别注意此类事件。不设置该方法，页面不支持分享如何发送模板消息小程序需要做什么在小程序段必须使用，获取到并和其他数据一起传给服务器。 showImg(https://segmentfault.com/img/remote/1460000014423859); 1.微信基本组件的高级解读数...

laznrbfe 2019-08-29 15:04 评论0 收藏0
Android程序员完全没时间提升自己怎么办？

摘要：昨天有个小学弟给我发来微信，说他现在有点后悔选择开发了，月月光不说，还加班特别严重，平时也没有属于自己的时间去学习，问我刚毕业的时候是不是这样。每天回到出租屋都是倒头就睡，非常累，也没有其他时间提升自己的技术。昨天有个小学弟给我发来微信，说他现在有点后悔选择Android开发了，月月光不说...

kohoh_ 2021-11-17 09:33 评论0 收藏0
从小白程序员一路晋升为大厂高级技术专家我看过哪些书籍？（建议收藏）

摘要：大家好，我是冰河有句话叫做投资啥都不如投资自己的回报率高。马上就十一国庆假期了，给小伙伴们分享下，从小白程序员到大厂高级技术专家我看过哪些技术类书籍。大家好，我是...

sf_wangchong 2021-09-29 09:35 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

pumpkin9 2019-08-23 17:12 评论0 收藏0