全部文章

我的第一个微信小程序 1 - 准备

2018-03-04 @sunderls

微信 小程序

微信在2016年退出了小程序平台,当时我写下了我自己的看法 - 微信「小程序」之我见, 简单的说我有两个看法:

  1. 对于开发者来说方便了,也是麻烦了。
  2. 小型的app的话可以尝试,如果要长期服务的app,还是需要原生app

到现在我的观点没有变化。不过,我却想到了一个适合小程序的App的idea,所以开始首次尝试开发一个小程序。

为什么不用react-native?

确实我最近用React-Native在短短几天之内(零散的周末)就在AppStore上发布了一款APP(具体系列文章看这里),

但是这次不用React-Native是有原因的:

  1. React-Native虽然一定程度上简化了原生APP的开发,但是开发成本并不低,会遇到各种各样的问题。所以到现在我都没有支持Android,如果用小程序的话可以避免该问题。
  2. 这次要做的APP非常小,可以说是一个idea实验的原型。所以没有必要开发原生APP
  3. 想要Social Graph,如果做原生APP,如何获得用户以及让用户扩散是一个避不开的问题。本来就是针对Social Graph的APP,那就用小程序最方便了。
  4. 用户增长了过后再导流到原生APP也不迟

首先创建一个小程序账号

看这里可以获得新手指南。

点击这里登录自己的邮箱密码。

然后在发来链接中注册登记信息。

选择「个人」类型

因为我不是企业。。

选择个人的话需要:

  1. 身份证ID
  2. 电话号码
  3. 绑定了银行账号的微信账号

真是麻烦,不过没办法。照着一通注册。

创建第一个小程序

一个账号只能有一个小程序,名字需要好好考虑

  1. 正式发布前有2次更改名字的机会,发布后一年2两次
  2. 正式发布前图标可以更改2次,发布后一个月5次

创建完毕后可以在详情页看到App ID

下载开发IDE

这里可以下载。

打开后之后:

可以看到有两个选项:

  1. 开发小程序
  2. 公共账号的debug

点左边咯。

创建新的project

选择既定的模版,点击确定就好

哦,界面比之前变的好看多了。

查看源代码,可以看到两个页面,一个logs,一个首页。查看首页的源代码:

  1. index.js => js(logic)
  2. index.wxml => html(template)
  3. index.wxss => css(style)

moto是在index.js的state中管理的,改为:

Page({
  data: {
    motto: '@sunerls的第一个小程序'
  }
});

保存后,自动刷新,可以看到文案发生了变化。

有vue.js和react的开发经验,小程序的代码格式上手并不难。所以准备快速搞一个app出来,遇到的问题会和大家分享,敬请期待下一篇文章。