福运通网络营销与深圳SEO优化第一品牌

专为中小企业提供网络营销服务
最新资讯

前端圈:微信小程序开发一周总结

    Time: 2020-08-01来源:福运通

"files.associations": {

"*.wxss": "css",

"*.wxml": "html"

}

也可以安装小程序相关插件

开始写代码

首先需要完整看完微信小程序文档(框架,组件和 API),方便后面用到时查找。

view 组件对应 html 里的 div

text 对应 span

wxss 里选择器只支持 element, #id, .className, ::after, ::before

公用组件

项目目录里新建 components ,按类似 pages 目录结构,将每个组件的模板,样式和 js 文件放在同一个文件夹

模板可以直接  或者需要传值的使用  + 

样式使用 @import 导入

js 使用 require 引入到页面,然后使用下面的 mergePage 来加载到页面对象中。

mergePage

组件的加载

使用mergePage方法将所有组件方法及页面事件注册到页面对象

组件的编写方式

组件里使用可以 this.setData 来更新页面数据,或者注册 onLoad,onShow等页面事件,mergePage 的最后一个参数的事件会最先调用。

mergePage 的源码

es 6

箭头函数,函数参数默认值及解析构

一些函数参数也可以直接使用默认参数。

拓展运算符 和 对象属性简写

在给 template 传 data 参数时,可以使用对象属性简写,如

<template is="..." data="{{...obj, id: otherIdVariable, name}}"></template>

这样 template 中可以使用变量为 obj 对象的所有 key,以及 id 和 name

模板字符串

小程序里可以直接方便的使用 es 6 模板字符串

let url = `${app.globalData.API_PREFIX}/cart/add`; 更多 es 6 特性

请参考:https://uedsky.com/2016-06/es6/ ,也可以参考下一篇es6语法简介

其它注意

wx.showToast 图标只支持"success"、"loading",错误提示得自定义

如果 template 里面的变量没值,请看 data 传进来没有。

开发工具(v0.10.102800)可以用下面方法添加接口请求域名,遗憾的是微信里不行。

所有页面的 JS 会在启动时立即执行,而不是打开页面才执行,所以一些写在全局的代码应该尽量放到 onLoad 之后,下面是从调试 source 里看到加载的代码:

define("pages/index/index.js", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket ){

'use strict';

var app = getApp();

var util = require('../../../utils/util');

var ErrorMsg = require('../../../components/error-msg/error-msg');

var AddressPicker = require('../../../components/address-picker/address-picker');

 

Page(util.mergePage({

// 页面代码省略

}, AddressPicker, ErrorMsg));

//# sourceMappingURL=data:application/json;...});

require("pages/index/index.js")

深圳SEO:http://www.tianying888.com

关键词:前端,微信,程序开发,一周,总结