免费报价400-888-4926
手机咨询158-
扫一扫立即体验
小程序不是APP胜似APP
实现你“触手可及”云梦想
面向不同行业，提供一站式产品服务支持
商城类小程序
为各行业提供线上电商交易平台。支持单店商城、多店商城、商家入驻型商城、O2O新零售商城等多种商城模式
展示类小程序
展示企业的服务、宣传企业品牌、为企业客户 提供客服服务。
上门服务类小程序
为餐饮、美容美甲、洗护按摩等生活服务类 企业提供上门服务类小程序解决方案
外送类小程序
为餐饮、鲜花预订、蛋糕定做等类企业 提供小程序外送服务
餐饮类小程序
线上点餐预定，现场堂食扫码点餐，外送 等功能定制。支持单店、多店形式。
教育类小程序
线上线下课程购买、课程预约、在线课程学习、线下课程培训、编制课程表、上课签到等功能。
接发单平台类小程序
需求方发布需求并下单支付，服务方抢单或者系统派单并提供服务，服务完成需求方可对服务进行评价。
酒店、KTV类小程序
为酒店、公寓、名宿、KTV等类行业实现 房间预订、入住管理、退房核销等功能。 支持单店、多店模式。
小程序在微信的入口展示
它无处不在 随时可用
线下小程序
转发小程序名片或页面
附近小程序
绑定关联通知
公众帐号 “相关小程序”链接
商家公众号平台
自定义菜单跳转
公众帐号文章内链“卡片，文字链接，图片”
微信内扫 小程序码
小程序直接 打开小程序
你是否遇到这样的困惑?
如果有这样的一个小程序，把你的服务入驻微信
开放给微信 10亿用户
你还担心没有流量吗？
无需下载、安装、升级，用户搜一搜、扫一扫立刻享受服务
极致用户体验,你是不是很惊喜？
极欧科技十年技术开发经验，微信小程序开发良心品牌
极欧科技十年技术开发经验，微信小程序开发良心品牌在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
我直接用 vscode（其它编辑器同理，预览还是用的微信开发工具），语法高亮将 wxml 设置成 html, wxss 设置成 css
"files.associations": {
"*.wxss": "css",
"*.wxml": "html"
也可以安装小程序相关插件
开始写代码
首先需要完整看完微信小程序文档（框架，组件和 API），方便后面用到时查找。
view 组件对应 html 里的 div
text 对应 span
wxss 里选择器只支持 element, #id, .className, ::after, ::before
项目目录里新建 components ，按类似 pages 目录结构，将每个组件的模板，样式和 js 文件放在同一个文件夹
模板可以直接 &include/& 或者需要传值的使用 &import/& + &template&&/template&
样式使用 @import 导入
js 使用 require 引入到页面，然后使用下面的 mergePage 来加载到页面对象中。&!--more--&
组件的加载
const ErrorMsg = require('../../../components/error-msg/error-msg');
Page(util.mergePage({
// 页面 Page 方法...
onLoad() {
// 可以直接在页面方法中调用 showErrorMsg 方法
}, ErrorMsg/* 更多组件也可以*/));
使用mergePage方法的优点是可以将所有组件方法及页面事件注册到页面对象
组件的编写方式
var errorT
module.exports = {
showErrorMsg(msg, cb) {
clearTimeout(errorTimer);
this.setData({
errorMsg: msg
errorTimer = setTimeout( () =& {
this.setData({
errorMsg: false
cb && cb();
// 可以在这里注册 `onLoad`，`onShow`等页面事件
组件里使用可以 this.setData 来更新页面数据，或者注册 onLoad，onShow等页面事件，mergePage 的最后一个参数的事件会最先调用。
mergePage 的源码
* 合并 Page 对象所有的方法及事件
* 子对象不能使用 data 属性，请在 onLoad 中使用 setData 方法设置
function mergePage(dest, ...src) {
let args =
let eventsStack = {
onLoad: [],
onReady: [],
onShow: [],
onHide: [],
onUnload: [],
onPullDownRefresh: [],
onReachBottom: [],
// 保存所有的事件，最后一个参数的事件会最先调用。
for(let name in eventsStack) {
for(let i = args.length - 1; i &= 0; i--) {
args[i][name] && eventsStack[name].push(args[i][name])
// Object.assign(...args);
// Object.assign 需要添加 polyfill 兼容 Android（不支持数组参数展开）
Object.assign.apply(null, args);
for(let name in eventsStack) {
dest[name] = function() {
for(let i = 0; i & eventsStack[name]. i++) {
eventsStack[name][i].apply(this, arguments);
Object.assign Android 上兼容问题
小程序里在 Android 上没有 Object.assign 这个，除了上面的 mergePage，其它地方也会经常用到。我们可以到 app.js 里检测是否支持，然后添加 polyfill
// polyfill for Android before app starts
if(!Object.assign) {
Object.assign = require('./utils/object-assign')
utils/object-assign.js 源码
// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
module.exports = function (target) {
// We must check against these specific cases.
if (target === undefined || target === null) {
throw new TypeError('Cannot convert undefined or null to object');
var output = Object(target);
for (var index = 1; index & arguments. index++) {
var source = arguments[index];
if (source !== undefined && source !== null) {
for (var nextKey in source) {
if (source.hasOwnProperty(nextKey)) {
output[nextKey] = source[nextKey];
箭头函数，函数参数默认值及解析构
wx.request({
complete: ({data= {}}) =& {
// 1. 因为 wx.request 返回的接口数据是在 data 属性里，这里我们只要 data 属性就行了，所以直接参数解析构
// 2. 如果 failed，无 data 时，data 将为默认值 {}
if(data.code !== 0) {
// do something if request failed
// 请求正常处理代码
// 3. 因为用的箭头函数，回调里可以正常使用 this, 访问 Page 对象的方法
// 比如 this.setData(...)
一些函数参数也可以直接使用默认参数。
拓展运算符 和 对象属性简写
在给 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 特性
wx.showToast 图标只支持"success"、"loading"，错误提示得自定义
如果 template 里面的变量没值，请看 data 传进来没有。
开发工具（v0.10.102800）可以用下面方法添加接口请求域名，遗憾的是微信里不行。
// 放到 app.js 前面
__wxConfig.projectConfig.Network.RequestDomain.push('https://weapp.juanpi.com');
所有页面的 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/...
});require("pages/index/index.js")
原文地址：获取最佳阅读体验并参与，请访问原文
3 收藏&&|&&15
你可能感兴趣的文章
16 收藏，4.4k
37 收藏，1.2k
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
不能用js直接操作dom了嗎
不能用js直接操作dom了嗎
不能，没有document 和window 了
不能，没有document 和window 了
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。只需一步，快速开始
后使用快捷导航没有帐号？
关注：1520
所属分类： & &
本版块为微信小程序资源分享版块，包括微信小程序开发中可能会用到的各类小程序开发工具、小程序demo及开发教程等。
快捷导航（）：、、
微信小程序demo源码、开发工具和插件资源下载
892 / <span title="万
微信小程序开发教程，小程序开发技巧探讨、踩坑过程分享、案例解析教程
2043 / 2630
昨天&18:49
1173/16238
4249/67204
1278/17923
1028/13750
发现新世界小程序最新问答
小程序一周最热
henkuai.com是专业的第三方微信开发者平台，为生态而生。
本站为第三方微信开发者平台，非腾讯官方网站。
天津市滨海新区中新生态城中成大道生态建设公寓9号楼3层301
欢迎来这里一起喝喝茶，聊聊你的产品。
微信公众号gongzhongkaifa
工作日12小时内回复。
工作日12小时内回复。