where to find your Wechat Mini App id and secret. / 怎么找到你的微信小程序的ID 和 密钥。

1 进入你的小程序控制面板, 左边找到开发 / login into your wechat Mini app backend, find the development .

 

2   开发设置, 下面有 APPid , AppSecret, ( 如果你忘记了,你需要重置下 )把这两个给你的开发者。/ send the AppId and APPSecret to your developer, (you may need reset your App secret, if you fogot it..)

 

微信小程序国际化

微信小程序对没有对多语言的支持,不过我们可以自行加入。

在实现过程中,主要考虑到如下几点:

  1. 语言是全局变量,一旦修改语言,其它页面应该立即作出变化。
  2. 保存用户选择的语言,用户下次重新打开小程序能够恢复用户的选择。

创建辅助函数并注册到 wx 之下

在 utils 目录下新建一个 i18n.js 文件。

// /utils/i18n.js
let T = {
    locale: null,
    locales: {},
    langCode: ['zh-Hans', 'en']
}

T.registerLocale = function (locales) {
    T.locales = locales;
}

T.setLocale = function (code) {
    T.locale = code;
}

T.setLocaleByIndex = function(index) {
    T.setLocale(T.langCode[index]);
}
        

T.getLanguage = function() {
    return T.locales[T.locale];
}

export default T

T.locale 用来存储一个对象,这个对象是当前用户选择的语言。在使用 T 之前,我们需要调用 registerLocale 初始化 locales

我们在 /utils/locales.js 中这样定义可用的 locales

// /utils/locales.js
export default {
    'zh-Hans': {    
        "language": "语言",
        "languageName": "简体中文",
        "login": "登录",
        "logout": "登出",
        "changed": "修改成功",
        "loginSuccessed": "登录成功",
        "loginFailed": "登录失败",
        "logining": "正在登陆",
        "requestError": "请求失败",
        "personalInfo": "个人信息",
        "settings": "设置",
        "checkIn": "签到",
        "checkOut": "签出"
    },
    'en': {
        "language": "Language",
        "languageName": "English",
        "login": "Log in",
        "logout": "Log out",
        "changed": "Changed successfully",
        "loginSuccessed": "Logged in","loginFailed": "Logged in failed",
        "logining": "Logging in",
        "requestError": "Request error",
        "personalInfo": "Personal information",
        "settings": "Settings",
        "checkIn": "Check in",
        "checkOut": "Check out"
    }
}

为了让 T 成为全局变量,我们需要在小程序注册之前就将其初始化。在 app.js 中写入如下代码。

// /app.js
import locales from './utils/locales'
import T from './utils/i18n'

T.registerLocale(locales);	// (1)
T.setLocaleByIndex(wx.getStorageSync('langIndex') || 0);	// (2)
wx.T = T;	// (3)

App({
    onLaunch: function () {
	  // ...
    },
    globalData: {
	  // ...
    }
})

我们在 (1) 处用 /utils/locales 注册了 locale,在 (2) 处将当前语言设置为用户上一次选择的语言,如果是第一次使用,则调用 T.setLocaleByIndex(0) 将语言设置成中文,在 (3) 处将 T 注册到 wx 之下,这样在任何地方都可以调用 wx.T.getLanguage() 来得到当前的语言对象了。

我们这里看到的 langIndex 这个缓存在用户每次更改语言的时候都将要重新存储一下,关于微信缓存的接口可以查看文档:数据缓存

语言切换的实现

切换语言这个功能是在 /pages/index 页面下实现的,index.js 的代码如下:

// /pages/index/index.js
var util = require('../../utils/util.js')

import event from '../../utils/event'

Page({
  data: {
    language: '',
    languages: ['简体中文', 'English'],
    langIndex: 0
// ...
  },

  onLoad: function () {
    this.setData({
      langIndex: wx.getStorageSync('langIndex')
    });
    this.setLanguage();
    // ...
  },

  changeLanguage(e) {
    let index = e.detail.value;
    this.setData({	// (1)
      langIndex: index
    });
    wx.T.setLocaleByIndex(index);
    this.setLanguage();
    event.emit('languageChanged');

    wx.setStorage({
      key: 'langIndex',
      data: this.data.langIndex
    })
  },

  setLanguage() {
    this.setData ({
      language: wx.T.getLanguage()
    });
  }
  // ...
})

相应的 index.wxml(使用 Zan UI):

<!-- /pages/index/index.js -->
<view class="container">
  <!-- ...other views... -->
  
  <zan-panel title="{{language.settings}}">
    <zan-cell title="{{language.language}}">
      <picker mode="selector" range="{{languages}}" value="{{langIndex}}" bindchange="changeLanguage">
        <view class="picker">
          {{languages[langIndex]}} <!-- (1) -->
        </view>
      </picker>
    </zan-cell>
  </zan-panel>

</view>

这里出现了一个唯一不依靠 locales 存在的字符串数组 languages,它是用来给 Picker 组件 使用的。为了让 Picker 组件每次都能正常显示,我们必须在 onLoad 生命周期函数中加上

this.setData({
  langIndex: wx.getStorageSync('langIndex')
});

来确保用户退出之后重新进入小程序时仍能正常显示当前使用的语言。

同时,为了确保用户退出之后重新进入小程序时仍能恢复上次的语言设置,需要调用 wx.setStorage() 存储当前选择的 langCode 便于下次在 app.js 中恢复。

测试结果:

其他页面的处理

相信细心的读者应该已经看到了 /pages/index/index.js 中有一句 event.emit('languageChanged');,这是为了释放 languageChanged事件,让其他页面感知道,并在下次加载的时候修改语言。

在 /utils/event.js 中写入如下的代码:

// /utils/event.js
let events = {};

function on(name, self, callback) {
  let tuple = [self, callback];
  let callbacks = events[name];
  if (Array.isArray(callbacks)) {
    callbacks.push(tuple);
  }
  else {
    events[name] = [tuple];
  }
}

function remove(name, self) {
  let callbacks = events[name];
  if (Array.isArray(callbacks)) {
    events[name] = callbacks.filter((tuple) => {
      return tuple[0] != self;
    })
  }
}

function emit(name, data) {
  let callbacks = events[name];
  if (Array.isArray(callbacks)) {
    callbacks.map((tuple) => {
      let self = tuple[0];
      let callback = tuple[1];
      callback.call(self, data);
    })
  }
}

exports.on = on;
exports.remove = remove;
exports.emit = emit;

这里的 on 用来添加一个事件处理函数,每当 emit() 被调用触发某个事件时,都会执行这些函数,并且以 on() 中存入的 self 作为 this argument, emit() 传入的 data 作为参数。

比如另外一个界面 /pages/work/index 的 js 代码如下:

import event from '../../utils/event'

const Dialog = require('../../zan-ui/dialog/dialog');

Page({
  data: {
    language: '',
    signedInTimes: 0,
    checkedIn: false
  },
  onLoad: function () {
    this.setLanguage();	// (1)
    event.on("languageChanged", this, this.setLanguage); // (2)
  },
  setLanguage() {
    this.setData({
      language: wx.T.getLanguage()
    });
  }
  // ...
});

(1) 处是为了在首次加载页面,但是没有接收到事件时,正确地设置语言。在 (2) 处将 setLanguage 添加到事件处理函数中,一旦在语言设置时触发 languageChanged 事件,这个页面的语言会做出相应改变。这里的 setLanguage 不需要任何参数,在 /pages/index/index.js 使用 emit 触发事件时也没有必要传给数据,因为一切都在全局变量 wx.T 里面了,这样非常方便。

测试结果:

 

NavigationBar 和 TabBar 的语言切换

开始以为它们的语言是在 app.json 已经定义好了的,无法修改。查了查官方文档,看到了 wx.setNavigationBarTitle(OBJECT) 和 wx.setTabBarItem(OBJECT) 这两个 API。我们可以把对 NavigationBar 和 TabBar 的修改集成到 T.setLocaleByIndex 中去,这样不管是每次加载小程序还是修改语言,NavigationBar 和 TabBar 的语言都将被切换。

// /utils/i18n.js

// ...
T.setLocaleByIndex = function (index) {
  lastLangIndex = index;
  T.setLocale(T.langCode[index]);

  setNavigationBarTitle(index);
  setTabBarLang(index);
}


T.getLanguage = function () {
  setNavigationBarTitle(lastLangIndex);
  return T.locales[T.locale];
}


let navigationBarTitles = [
  '哈工大博物馆小助手',
  'HIT Museum Assistant'
];
// 设置导航栏标题
function setNavigationBarTitle(index) {
  wx.setNavigationBarTitle({
    title: navigationBarTitles[index]
  })
}

let tabBarLangs = [
  [
    '工作',
    '我'
  ],
  [
    'Work',
    'Me'
  ]
];
// 设置 TabBar 语言
function setTabBarLang(index) {
  let tabBarLang = tabBarLangs[index];
  
  tabBarLang.forEach((element, index) => {
    wx.setTabBarItem({
      'index': index,
      'text': element
    })
  })  
}
// ...

但是这样还有一个问题,就是在 index 页面触发 languageChanged 事件时会调用 work 页面的 setLanguage 从而调用到 T 中的修改 NavigationBar Title 的函数,这样修改的也只是 index 页面的 Title,并不能修改 work 页面的 Title。考虑过不使用事件监听函数而是在每个页面 onShow 时设置语言,但是这样有许多重复操作,效率太低,考虑采用其他方法来解决。

最终的实现添加了一个 shouldChangeTitle 标志,在 onShow 时加以判断即可。

// /pages/work/index.js

  //....
  onShow: function() {
    if(this.data.shouldChangeTitle) {
      wx.T.setNavigationBarTitle(); // (1)
      this.data.shouldChangeTitle = false;
    }
  },
  setLanguage() {
    this.setData({
      language: wx.T.getLanguage()
    });
    this.data.shouldChangeTitle = true; // (2)
  }
  // ...

languageChanged 事件触发后,只在 (2) 处做一个标记,在 (1) 处小程序切换到 work 页面时再修改 NavigationBar Title。

相应地修改 i18n.js 将 setNavigationBarTitle 暴露出去:

// /utils/i18n.js

// ...
let navigationBarTitles = [
  '哈工大博物馆小助手',
  'HIT Museum Assistant'
];
// 设置导航栏标题
T.setNavigationBarTitle = function() {
  wx.setNavigationBarTitle({
    title: navigationBarTitles[lastLangIndex]
  })
}
// ...

在 index 上也要显式地调用 setNavigationBarTitle

// /pages/index/index.js

// ...
  setLanguage() {
    this.setData({
      language: wx.T.getLanguage()
    });
    wx.T.setNavigationBarTitle();
  },
// ...

测试结果:

 

总结

这样文章开头所说的两个方面都解决了:语言是全局变量方便调用,修改语言后进入其他页面时会更新语言,同时小程序还能记住用户的语言习惯。

本项目的代码已经开源 https://github.com/upupming/HITMers ,欢迎前来交流。

参考资料

  1. https://github.com/brandonxiang/weapp-weatherfine
  2. https://github.com/brandonxiang/weapp-i18n

少有人讨论的问题 – 互联网新项目成功指南- 前端篇(下)

在上一篇文章中,我们详细的分析过目前互联网圈做新项目需要的前端。一共大概7种

  1. 电脑版界面(最传统的网页)– 针对台式机和笔记本等大屏幕用户
  2. 响应式手机端 – 目前在欧美最流行的版本,可以随着用户的屏幕大小自动改变显示的结构,以便手机和平板用户能顺利浏览。
  3. webAPP – 目前在中国大陆广泛采用的,一般大公司才用,你可以理解为一个运行在浏览器上的应用,通常和你的手机APP设计一样。比如你直接手机浏览器输入 jd.com 打开京东,直接访问的就是一个webAPP。(注意它和响应式手机端的区别)
  4. 快应用– 是由中国大陆的几大手机厂商(华为、小米、OPPO、vivo、中兴、金立、联想、魅族、努比亚)在2018年联合推出的一种前端形式,它和我们理解的移动APP很像,但是不需要安装,点开就能用。
  5. 微信小程序 – 最开始就说了,微信小程序也只不过是另一种前端形式,特点是只能在微信内部用。
  6. 其他小程序 – 鉴于这是其他互联网巨头为了抗衡微信小程序的产品,我们都放一起了,包括支付宝小程序,百度小程序,头条小程序等等等等
  7. 移动应用 – 大boss来了,目前互联网应用的终极形态。主要包括安卓APP, IOS APP.

那么我们在发起一个新项目的时候,究竟做任何的取舍呢?

我们提供一个大概的决策框架。

1 首先,明确定位你项目的属性。什么意思呢?我们认为不管你是做什么,你的项目属性无外乎下面三种。

  • 媒体性质
    • 比如你就是要做一个企业的官网,起宣传介绍左右。
    • 或者你是一个某种产品的经销商,你想宣传你的这个产品,你想从baidu获取搜索流量,甚至打广告。
    • 媒体性质的左右主要是内容的展示和营销,对产品功能和性能要求没那么高。
  • 工具性质
    • 比方说,你给健身的人群提供一个记录手段。
    • 你为某一种商业活动提供一个预定的流程,和支付手段
    • 你想帮助学英文的人记单词。
    • 你想建立一个网店售卖你自己公司的产品。
    • 工具性质的产品是为了提高社会运作效率,对技术和功能,产品的完整行要求都很高。
  • 平台性质
    • 平台性质兼具媒体性质和工具性质,同时还加上了中介性质。
    • 平台可以为双方提供一定的信誉担保,和评价,排名体系。
    • 平台一般是大公司做的事情,往往是由前面两种性质的产品进化而来。

QQ 这个软件,最开始只是一个让大家聊天的工具,后来就出来了QQ新闻网站,加上了媒体属性,然后腾讯的各个产品都来了,就变成了一个大平台。

新浪这个网站最开始只是一个媒体网站,后来增加了微博这个工具,让一些大V入驻,增加了工具属性。当流量越来越多后,微博就开始变成平台。开始为你推荐热点,卖广告,也成了一个大平台。

总而言之,你对你的产品一定要有清晰的认识,你一定是从媒体,或者工具开始,然后才能进化为平台。千万不要一开始就奔着平台去。

那么这三种模式的产品对前端的要求是什么呢?

媒体 工具 平台
电脑版界面
❤️
❤️
响应式手机端
❤️
❤️
webAPP
❤️
❤️
快应用
❤️
微信小程序
❤️
❤️
其他小程序
❤️
移动应用
❤️
❤️

我直接用一个表格说明了。 为什么呢?

1 媒体的要求是经可能的曝光自己的内容,获取流量。要想获取更多的曝光,就要经可能的借取第三方的力量,百度,微博,抖音,快手,微信公众号,还有大量第三方媒体,这些都不能少。所以你需要确保你的网站有一个链接。而且任何情况下都能访问。 反而,像小程序,应用这些是不必要的,因为他们并不能给你带来流量。

2 工具的要求是尽可能的好用和完备。什么意思呢?你不需要很多端,你只需要一个端做到完美就好。因为工具做的好了,用户会自己找上你的,你根本就不需要做什么宣传。那些需要大力宣传才能招揽用户的工具产品,说明你工具本身就没做好。你唯一需要的只是一批种子用户而已。

3 平台我就不说了,作为一个平台,你的端覆盖的越全面,越好。

 

 

Magento2 完整功能列表

以下功能基于Magento2 社区版,由于一直在更新,如果有不准确,请以实际最新版本为准。


营销,促销和转化工具

相关产品,向上销售和交叉销售产品管理
用户在浏览一个产品时可以看到同一个分类的其他产品,和同一个大类的其他小类的产品,这是符合用户购物的逻辑的)可以升级为:

亚马逊明星功能:买了这个的用户还买了那个,根据其他用户的历史购买记录智能推荐产品给浏览该商品的用户,提高用户下单率。 亚马逊明星功能:你可能对这个产品感兴趣,根据注册用户之前的购买历史智能推荐新产品,提高用户忠诚度,提高用户终身价值。 后端控制系统:可以灵活控制是否显示,和显示的数目。

根据店铺,分类,或者具体产品来执行目录促销
可以设置很多过滤条件,比如客户群,时间段,产品分类,和打折的方式。
使用非常频繁的功能,比如各种电商大促,品类大促,双11大促等等都需要这个功能,既可以直接打折,也可以给一定金额的折扣。

为每个促销动作生成一组唯一的优惠券代码,轻松管理和监控优惠券使用情况并生成详细报告
可以生成一些特殊字符组成的优惠券,并使用任意方式分发出去,并且可以监控各个优惠券的使用情况。比如,那个新客户是优惠券带来的,那个优惠券带来的新客户最多,优惠券也可以是一次性的,也可以是可以使用多次。

一次购买多件优惠
比如一次买多件产品可以有一个折扣。买不同的数量,价格可以不一样,可以吸引用户一次多买几件。

最低价格(MAP)
当某个产品的价格过低,你可以选择隐藏这个产品的价格

分类登陆页(Landing Page)
推广中经常使用的功能,当然你把流量引向某个系列分类产品时,你需要把这个分类做成一个登录页来转化流量。

客户群
你可以把客户分出很多不同的组,这样可以实现不同的组不同的折扣,价格,甚至针对不同的组做不同的促销政策,发展自己的vip体系等等。

绑定产品
可以把两个简单产品打包到一起来售卖,很有用的一个功能,促销时候经常使用。

最近查看产品和产品比较
允许用户很快找到自己刚刚浏览过的产品,想一下,电商购物时大家都是看好几个产品,这个功能可以让用户很快点击回到刚才看过的产品,而不需要使用浏览器后退功能。
产品比较:当一个产品的参数比较多的时候,用户可以很方便的比较两个产品的各个参数。

新产品促销
自动显示店铺新产品。wudi优化后可以根据各种规则显示出最畅销产品,评级最多产品,大促产品,主打产品等板块。

持久的购物车
你保存在购物车里面的产品,不会因为你关闭浏览器就消失。

免运费选项
你可以设置免运费

民意调查
你可以设置一个投票功能,显示在网站上。这个在营销时有点左右

订阅邮件管理
你可以管理订阅你的邮件列表的用户,这个在欧美电商中使用极其频繁,你也可以定时给他们发送促销邮件。

邮件分享
用户可以使用邮件分享给朋友一个产品,这个在欧美使用还是非常频繁的。

通过电子邮件发送愿望清单
用户可以收藏一个产品,并且可以把这个收藏订单分享给朋友(比如找别人结账买单)。


搜索引擎优化

100%搜索引擎友好

站点地图
可以生成搜索引擎收录需要的站点地图。

自动生成站点地图
这个站点地图是给访客看的,上面那个是给google baidu 等搜索引擎看的。

搜索引擎友好的URL
所有产品和分类的URL都是对搜索引擎友好

URL重写和自定义
可以按照要求重写和定制URL,这个一般用于当一个产品不存在后,不想浪费他的排名和流量,那么可以重定向到其他产品。

产品,类别和内容页面的Meta信息
可以手动设置产品,分类,页面的 meta 信息,Meta title, meta description, 这是搜索引擎优化的基础。wudi 优化后,可以实现根据一定的产品字段规则自动生成对应的Meta title, Meta description.升级为:

自动结构化商品数据,能同步商品评论数据到搜索引擎
提高产品页在搜索引擎的排名和点击率。
高点击率会提升产品页的排名提升速度。
产品Meta 模版,可以根据规则自动生成大量产品的meta 信息,这是非常重要的SEO 手段

自动生成的热门搜索字词页面
系统根据用户的搜索记录把热门的搜索关键词排列出来。这个功能很好,比如当某个产品在市场上火了,你的系统就可能自动生成出带有这个产品的列表。

用于购物的Google Content API
可以对接google shopping. 把产品同步过去。google 的搜索结果偏向于自己的google,虽然被欧盟罚款几十亿,但是其他国家市场仍然有这个偏向。


店铺管理

从一个管理面板控制多个网站和商店,能够根据需要共享尽可能多的信息
我们知道Magento支持多店铺和网站,所有的网站和店铺都在同一个后台控制。而且不同的店铺和网站之间还可以共享一些资源,比如logo,产品,图片,等等。

管理权限/角色和用户
可以为后台设置多种角色, 为每一种角色设置不同的权限,每一个角色中可以创建多个用户,和你公司的员工一一对应。比如发货,物流,售后,营销等不同的工种。

100%可定制的前端
wudi 可以帮你定制前端界面。

支持多种语言和货币。 Web Services API,可轻松集成第三方应用程序
支持多种语言,和多种货币。Web Services API 用于开发移动应用,和微信小程序等。集成第三方程序,比如对接netsuite,sap, salesforce 等各种ERP CRM,对接 sega 等各种财务管理软件,对接各种物流公司 DHL 等等,基本市场上任何流行的软件都可以对接。

批量导入和导出产品目录和客户信息
一些来自其他渠道的客户,可以批量导入。
批量导入产品和分类在上传新产品的时候非常有效。

内容管理系统是用于创建一些页面,比如在营销时候,一些视频和图片文字展示。还有网站条款,公司介绍,服务介绍等传统网站的功能。也可以用于管理在移动APP 或者微信小程序上的内容。

不同国家,产品类型或客户群的税率管理(比如批发与零售商)
允许根据规则为不同的产品增加税率。比如欧洲的税率和美国就不一样,针对批发用户或者零食用户税率可能也不一样,不同的产品的税率更是千差万别。Magento 都可以灵活的设置。

验证码功能
这个功能防止自动化软件尝试不断猜测后台密码来登录你的后台,一旦尝试次数过多,就会要求输入验证码。


目录管理

简单产品,可配置产品(例如尺寸,颜色等),捆绑产品和组合产品
简单产品就是不需要选择规格就可以直接下单的产品。)
可配置产品是需要选择规格才可以下单的产品(比如要选择颜色,尺码)
*注意如果一个产品的不同规格不需要追踪库存,那么可以使用简单产品的自定义属性来实现,从而不需要使用可配置产品
捆绑产品是把两个简单产品放在一起卖。
组合产品是把一个产品分成一步一步的来卖。(如果你在网上组装电脑,先选显示器,再选内存条,再选电源,再选机箱等等)

根据不同的用户组制定产品价格
前面说过,一个产品面向不同的用户组可以有不同的价格。

虚拟产品
如果你是卖充值卡,虚拟货币。

可下载产品
某些可以下载的产品,比如源码,视频,之类的。

无限产品固定属性
可以先设置自己网站的产品通用属性,比如材质,产地等,然后增加产品的时候,可以直接选择。

属性集
属性集合就是把产品属性集合起来,方便管理和复制。比如服装类通常使用一个属性集合。化妆品类使用一个产品集合。

库存管理,支持延期交货,最小和最大数量管理
你可以为一个产品设置库存,并且设置库存生效的时间。设置最大或者最小的库存,防止超卖和防止缺货。

批量更新产品
你可以批量更新产品的某个字段。比如批量下架,或者批量提高原价。

自动调整图像大小和水印
你可以为产品图片设置水印

高级定价规则和特殊价格
被电商大范围采用的原价,和促销价一起展示。

搜索结果重写和重定向
可以手动控制用户搜索某个关键词后的访问页面。

审核的产品标签和评论
可以审核用户的评论和标签

个性化产品购买,上传图像和文字(比如刺绣,字母等)
客户可以在购买时候上传图片或者输入文字等,用于销售可定制产品。比如你可以运行用户在一个衣服上刺绣一个文字,或者在手机上刻一段话之类的(之前苹果销售Ipad时候用过)。

浏览排序 – 定义客户在类别(价格,品牌等)上排序的属性
可以设置一个分类的排序规则,比如按照价格排序,或者评论排序,或者按照其他属性来默认排序,这个功能可以提高转化率。

低库存警报


用户浏览

分类导航
进入一个分类后会显示他的子分类,可以升级为次级列表页:

次级列表页是大型网站必备的功能,比如亚马逊
允许在主要分类下生成中间的过滤列表页
过滤列表页可以提高网站的产品浏览层次,更方便用户定位到产品
中间的过渡列表页可以均匀的分发网站权重,提高产品页面的权重,从而提高网站的关键词的总体排名

类别和搜索结果中的产品 – 按价格筛选并显示范围
在分类下显示可以用于筛选的属性,并显示每个属性下有多少产品。可以按照不同的属性筛选。
对搜索结果页面也生效

搜索功能增强
允许按照分类搜索,提高搜索精度,提高用户体验。
允许搜索自动提示,模糊搜索,提高搜索速度。
允许搜索提示结果带产品图片,无需点击即可知道搜索结果,提高搜索结果辨识度。
搜索框是电商网站的高频使用功能,会极大程度的影响购物体验。

静态块功能
一个可以写入自定义HTML的板块,并可以插入到网站上很多位置。Wudi 优化后可以不需要代码插入滑动的图片,最新产品,最热产品,最新评论等。可以升级为广告管理系统:

广告管理作为店铺管理员平常工作重要的一部分,关系到店铺运营的效率。
允许管理员可视化管理店铺任意位置的广告,和特效,广告文字,包含首页横幅
允许管理员统计广告图片的点击次数,以此来判断广告图片的设计水平和用户喜好,并不断进步。
允许在店铺多个位置插入广告图片,并统计效果。

可配置搜索
可以使用限制条件的高级搜索,一般用于大型网站,比如销售零部件的网站,用户需要根据很多规则搜索。

面包屑导航
告诉目前目前在网站的那个分类下面。

不同的产品和类别可以有不同的界面设计
比如对正在打折促销的分类,界面用大红色来烘托氛围,中国电商经常用。

网格或列表格式的产品列表
用户可以选择使用网格或者列表的形式展示产品列表

每个产品多个图像
产品支持多图片展示

产品图像放大功能
可以放大产品图像

产品自定义属性
可以手动为不同产品设置不同的下单规格。

收藏功能
用户可以收藏某个产品


结帐,付款和物流

一页结账
用户可以在一个页面完成结账动作,不需要不停的加载。

访客结账和结帐帐户使用地址簿
允许不想注册为会员的用户下单,允许已经注册的用户直接使用之前的地址结账。

一次发货到多个地址
比如一个用户一次买了很多件产品,有的给自己买的,有的给别人买的,有的给公司买的,他可能在一个订单里面写三个发货地址。

结帐开始时创建帐户的选项
可以让用户在结账过程中顺便创建账户

前端和后端订单的SSL安全支持
SSL能防止订单信息在结账过程中被他人窃取。

接受每个订单和每件商品的礼品消息
允许用户在结账中,附带一段附言,一般用于送礼。

购物车含税和运费估算
购物车里面可以看到含税价格和运费。

保存离线付款或者信用卡付款等方式
可以保存付款方式,比如信用卡

与多个PayPal网关集成
Paypal有多个支付方式,全部支持

与Authorize.net集成
美国流行的信用卡收款通道,美国公司才能申请。

接受支票/汇票
用户想使用支票付款时,可以选择这个付款方式。

接受线下付款
用户是一个采购商想线下付款时。
wudi 还可以集成大量其他第三方付款方式。比如中国这里的信用卡收款公司,还有小国家地区的付款方式。

与标签打印的装运集成 – 查看,编辑,打印所有主要物流商的标签
可以直接打印不同物流公司的物流标签,方便快速发货。

集成了实时运费: – UPS,UPS XML(帐户费率),FedEx(帐户费率),USPS和DHL
集成了多种国际物流公司费率,注意需要你有账户才可以对接。

能够为每种方法指定允许的目标国家/地
允许根据不同的物流方式限制不同的国家。比如DHL只发美国,欧洲只发EMS。

固定运费,和免运费
可以设置固定运费和免运费

表格运费
可以根据商品的重量,件数,价格,地点来使用一个表格倒入运费计算系统。

物流追踪
可以追踪物流的状态。

 


订单管理

从管理面板查看,编辑,创建和履行订单
和多人不知道的事,你其实可以手动为客户创建订单,然后进入你们公司的业务流程。

为每个订单创建一个或多个发票,运单和店铺信用,以便进行拆分履行。
有时候你会遇到一个客户下单,有部分产品退货了,那么这个时候你需要只发一部分订单的发票,其他订单的费用,你要转化为用户的店铺信用点,他可以用来买别的。
有时候客户的订单部分产品缺货,那么你可以分开发货。

打印发票,装箱单和运输标签
订单处理流程中的打印发票,打印物流单,快递单。

呼叫中心(电话)订单创建 – 为管理员提供透明控制,并在购物过程中为客户提供前端增强功能。对于所有类型的产品,更改产品配置可以由管理员方面的呼叫中心销售代表以及整个购物过程中的客户完成。在订单创建期间,愿望清单和购物车中可以直接更改自定义产品选择和配置
你可以直接操作用户的订单。
比如某个客户选错了颜色,或者填错了地址,后来他发现了打电话给你,你的客服需要帮他修改订单信息。

包括创建新客户,选择现有客户和查看他们的购物车,愿望清单,最后订购的商品,比较产品列表等
你可以查看客户的所有信息,包括他目前的购物车有什么,收藏了什么,最后买了什么,比较过什么, 你甚至可以送她优惠券。

自定义订单状态 – 预定义的订单状态列表(例如,新订单,处理中,付款审核中,完成)表示订单处理工作流程。订单状态被指定为订单状态的子类别(例如取消,完成,拒绝)
每一个公司的订单处理流程都不完全一样,这个功能就是给你来增加不同的订单处理流程,从而规范你公司的工作流程。

电子邮件订单通知
新订单可以设置为通过邮件通知你


用户中心

帐户信息中心
用户中心首页

地址簿
自己的地址簿,保存自己的所有地址

收藏清单,可以添加评论
自己收藏的全部产品,还可以为每一个产品增加自己的备注。

订单状态和历史记录
显示自己的购买订单的全部状态,和自己的历史订单

从帐户重新订购
重新下单,可以直接重新购买上次买过的产品

最近订购的物品
可以在控制面板直接看到自己之前买过的产品,再次进到产品详情

默认结算和送货地址
可以设置自己的默认结算方式和默认送货地址

发送电子邮件或发送愿望清单
比如把自己的收藏列表发送给自己老爸或者男朋友。

通讯订阅管理
控制是不是订阅店铺的促销邮件

提交的产品评论
显示自己评论过的产品

可下载/数字产品
显示自己可以下载的产品,或者虚拟产品
客户服务

联系我们表格
一个供客户联系我们的表单,会邮件通知店铺主。

从帐户订单跟踪
根据用户提供的电话,或者订单号搜索订单,并提供服务,非常常见。

密码重置来自前端和管理面板的电子邮件
用户可以重置自己的密码,你也主动发送邮件给用户,让他重置密码。

订单和帐户更新电子邮件
客户的订单每一步更新都会收到邮件通知。wudi 可以升级为短信通知。

可自定义的交易电子邮件
可以自定义每一封邮件内容,系统默认有自己的格式,你可以基于这个修改。


国际化

支持本地化,多种货币和税率 – 包括对欧盟WEEE / DEEE的支持

支持重音字符和从右到左文本
比如阿拉伯是从右到左,还有法文有特殊字符,都支持。

允许的国家/地区的可配置列表:
可以只允许某些国家使用你网站。

欧盟VAT-ID验证通过根据增值税客户群自动应用正确的税收规则来促进税收流程
欧盟cookie通知,通过在店面顶部显示选择接受cookie 符合欧盟关于隐私法的要求。


分析和报告

与Google Analytics集成
可以与google 分析集成,以便你详细的了解,流量大小,来源,转化率,用户浏览轨迹等等

销售报告
非常详细的销售报告,某些分类的报告,某些产品的报告等等

税务报告

被遗弃的购物车报告
显示有多少产品被加入过购物车,但是最终没有结账。

最佳浏览产品报告
显示那么被浏览最多的产品

最佳购买产品报告
显示那些卖得最好的产品

低库存报告
显示那些库存很低的产品

搜索字词报告
显示用户都在你网站上搜索了那些关键词,从而了解你用户的真实需求。

产品评论报告
显示那些用户在网站上留下了评论,那些产品被评论的最多,那些产品评分最多,从而针对性的改进。

优惠券使用报告
显示不同的优惠券被使用的情况,可以追踪不同的促销的效果。

总销售额开具发票
显示总共受到的钱

销售总额退款
显示总共退款金额


还可以点击下载Magento2企业版功能列表:

少有人讨论的问题 – 互联网新项目成功指南- 前端篇(上)

前言

前端架构对大多企业家,创业者来说可能是一个很怪异的词语,但是原谅我想不到更好的词语来表述。
我们知道,在现在的互联网世界,准确的说是2018年末,微信小程序是目前的明星,无论创业还是做新项目,第一步大家都想到的是先来一套微信小程序试试水,这是目前的主流思想,那么这里小程序其实是前端的一种。

前端泛指和用户互动的界面类型,通常我们说的网页,也是前端的一种。

从专业角度来看,前端类型的完整列表包括:

  1. 电脑版界面(最传统的网页)– 针对台式机和笔记本等大屏幕用户
  2. 响应式手机端 – 目前在欧美最流行的版本,可以随着用户的屏幕大小自动改变显示的结构,以便手机和平板用户能顺利浏览。
  3. webAPP – 目前在中国大陆广泛采用的,一般大公司才用,你可以理解为一个运行在浏览器上的应用,通常和你的手机APP设计一样。比如你直接手机浏览器输入 jd.com 打开京东,直接访问的就是一个webAPP。(注意它和响应式手机端的区别)
  4. 快应用– 是由中国大陆的几大手机厂商(华为、小米、OPPO、vivo、中兴、金立、联想、魅族、努比亚)在2018年联合推出的一种前端形式,它和我们理解的移动APP很像,但是不需要安装,点开就能用。
  5. 微信小程序 – 最开始就说了,微信小程序也只不过是另一种前端形式,特点是只能在微信内部用。
  6. 其他小程序 – 鉴于这是其他互联网巨头为了抗衡微信小程序的产品,我们都放一起了,包括支付宝小程序,百度小程序,头条小程序等等等等
  7. 移动应用 – 大boss来了,目前互联网应用的终极形态。主要包括安卓APP, IOS APP.

好吧,我居然列出了7种之多,各位创业者,企业家们可能有点晕,纷纷感叹,这年头难道做个项目要搞这么多种界面?我们项目上没见到一分回报,IT投入就直接让我资金见底了,那还玩不玩..

别急,这篇文章就是来分析下各种前端,然后给大家一些建议和参考。

先说说误区

目前有几个误区:

1 微信小程序就足够了:

随着一批一批小程序的火热,这个想法的人很多,但世事无绝对,你也许应该想清楚你的商业模式。

如果你是B2C模式,不管你是卖东西,还是卖虚拟产品,比如课程。那么其实你在哪里卖都行,的确可以只要微信小程序。因为促使用户下单的动力是你的产品能不能吸引到他们,贴合他们的需求,在哪里卖,什么形式卖,并不重要。前端对你来说,只是方便你进行交易,或者交付产品的工具。

而如果你是平台模式,比如你是一个撮合房东和租户的中介网站,或者一个二手物品交易平台,那么只有微信小程序显然远远不够。因为微信小程序是不允许你主动通知用户打开小程序的,那么你作为一个撮合平台,你无法为双方提供通畅的信息沟通机制,那你意义何在。这种情况下你应该是只利用微信小程序开发新客户,然后引导用户下载APP.

2直接放弃PC端

关于PC端,中国公司似乎非常不善于传统PC页面的搭建,我很少看到能让我眼前一亮的PC互联网产品,这一点和欧美区别相当大,很多人可能觉得这年头PC端可有可无啦,因为大家都用手机了。 错错错~

我想说,PC对一种类型的新创建公司,新项目具有举足轻重的地位。因为他们都忽视了一个重要的流量渠道,搜索引擎。

我拿一个最近很火的公司举例。“马蜂窝“ ,它虽然因为伪造用户游记和点评备受吐槽。但毕竟它现在可是市值170亿哦,大家仔细回忆下自己第一次使用马蜂窝是在哪里?是不是在百度上搜索某个景点,然后看到了马蜂窝上的一篇游记?

我再说一家公司,大名鼎鼎的知乎, 那么你再想想自己是怎么知道知乎的,我敢说绝大部分人都是先搜索自己想知道的问题,然后看到了知乎的链接。

百度虽然有点low, 但仍然是分发流量大户。虽然有点old school, 但效果是实打实的, 两家百亿小巨头应该能说明这个道理了吧。

背后的逻辑:作为一个新品牌,新项目,你不要奢求用户会主动因为你一点点软文,或者曝光就主动使用你的产品或平台,因为你还不出名,还不能给他们足够的信心,不值得他们花时间主动打开你的网站,甚至下载你的APP。你只能从用户的主动需求入手,先给用户他们想要的,顺带培养他们对你的信心和品牌感。

如果你认同我的观点,你就应该在新项目中,重金投入PC端,做好SEO。这不能保证你快速取得成功,但至少保证你坚持几年后,能肯定有所收获,而不是一无所获

3直接来全套。

关于直接来全套,如果你财大气粗,或背后有大互联网公司撑腰,那当我什么都没说,但你在前期真该好好想想那些端是最重要的,优先投入资源先把他们做完美了。其实有时候,完美比有重要。

比如你是一个写心情,写日记的小清新平台,或者是针对某个行业的复杂应用。(比如电力设备行业检修APP),你应该优先让某个最常用的端完美起来再说,而不是先搞很多端。

你的模式和前端的关系

一句话总结,你的商业模式决定你对各端的投入程度。

先说个例子,拼多多现在是无人不知,无人不晓的巨头了吧。但你有没有发现拼多多直到现在居然都没PC端和手机web,当然不是因为他们懒得做,而是因为他们拼团,和快速冲动下单的商业模式。他们希望控制用户的体验在手机上完成,这样有利于他们培养用户的习惯,和带来更多分享流量。

在下一篇文章中,我们会说到不同的商业模式下选择什么端。

少有人讨论的问题 – 互联网新项目成功指南- 前端篇(下)

Magento 开发微信小程序的安全和性能指南

在上一篇文章里面,我们说过 Magento 作为微信小程序,公众号的后台一般是使用 RESTful API, 那么我们如何处理安全和性能的问题?下面是一点点见解。

1 Magento 平台本身安全性无可挑剔,但RESTful 接口模式本质是使用字符串密匙,很容易泄露。

为了防止泄露,Magento 和前端 APP, 或者小程序公众号之间,最好再加一个 node.js 的中间服务器,用来和Magento对接,处理甚至缓存数据。

当然Magento 在配置 接口的时候,一定要控制好权限,不该给前端的权限一定不能给。

2 Magento 的支付是由后端发起的。大家知道,Magento2虽然进步很大,但支付接口调用的速度仍然不是最佳状态。 那么node.js 的中间服务器存在就很有必要。完全可以通过 node.js 服务器生成的支付接口来和微信服务器对接。这样支付性能大增。

3 关闭不使用的Magento 模块,Magento2 允许完全关闭不使用的模块。

4 不要让Magento 做自己不擅长的事情,比如CMS 内容管理系统。这种事情就不要放在 Magento 里面,随便找个CMS 管理框架。

 

微信小程序和 Magento 的对接指南

在中国使用Magento 肯定是离不开对接微信小程序。

我们现在提供对接Magento 和小程序的方案。

我们知道Magento 有一套完整的 RESTful API 接口,我下面列出一些主要的接口:

/V1/products
/V1/categories
/V1/products/options
/V1/carts/mine
/V1/carts/mine/payment-information
/V1/cmsPage

通过Magento 提供的一些接口,我们可以很轻松在小程序中调取Magento 系统的产品,和分类,并完全同步微信和Magento。

我们知道Magento 生态的电商功能无比强大,通过对接 Magento 和 Wechat 微信小程序,你可以快速拥有一个安全稳定的电商微信小程序。

Wudi Technologies 团队很荣幸的向您提供 基于 Magento 的电商 微信小程序服务。请联系我们!