宁皓网 微信小程序 : 起步 有大用

先在微信的公众平台注册一个帐号，这里会让你选择帐号的类型，你可以单独注册一个小程序类型的帐号 .. 我已经有了一个服务号类型的公众平台帐户，并且已经通过了微信认证 .. 也可以在这个服务器号注册小程序 ..

先用我的服务号登录一下公众平台 .. 在边栏上，你会看到小程序 ..

先点一下开通 .. 下面我们再去快速地注册并且认证一个小程序 .. 选择这个快速注册并认证小程序 ..

勾选一下，我明白 .. 然后快速创建 ..

打开用管理员身份在手机上登录的微信 ... 扫一下页面上的这个二维码 ..

进来以后，会让我选择复用资质 .. 因为我已经通过微信认证了 .. 勾选一下运营者信息 .. 使用同样的管理员 ..

再勾选一下微信认证资质 .. 然后 下一步 ..

注册小程序帐号

因为我现在是用的服务号，所以这里会提示我要再去创建一个小程序帐号 .. 创建好以后，我们的服务号帐号跟小程序账号是关联在一起的 .. 在开发小程序的时候，要用这里注册的小程序帐号登录到微信的公众平台 ..

输入一个邮箱 .. 要保证这个邮箱之前没在公众平台上注册过 ..

然后是密码 ... 再确认一下密码 .. 输入验证码 .. 勾选一下已阅读并同意 .. 再提交一下 ..

登录到刚才填写的邮箱 ...

找到微信发过来的小程序帐户激活邮件 ..

点一下邮件里的链接 ...

这里提示我们绑定一个小程序管理员 .. 确定一下姓名，身份证号 ... 输入管理员的手机，这样会在手机上收到一个验证码 ..

在下面输入收到的这个验证码 ..

然后再用管理员的身份扫描一下页面上的这个二维码 ...

再点击下一步 .. 回到首页 ...

现在我们就成功地创建了一个小程序帐号 ..

来自 https://ninghao.net/video/5030#info

用我们注册的小程序帐号登录到微信公众平台 .. 然后再去填写一下小程序信息 ... 点一下这里的 填写 ...

先给小程序起个名字 .. 比如 ninghaoDemo .. 然后检测一下 .. 确定能用这个名字 .. 再给小程序选择一个头像 ... 选择图片 ... 找到电脑上的一张图片 ..

下面再输入一段关于这个小程序的简介 ..

然后选择一下服务的类目 .. 我这里选择 教育 ... 再选择一个子类 .. 在线教育 .. 再提交一下 ..

我们可以为小程序添加一些开发者 ... 被添加的开发者可以一起协作开发我们的小程序 ..

点一下这个 添加开发者 .. 在这里可以搜索一下你想添加的开发者的微信帐号 ..

这里提示我要添加的这个开发者已经被绑定成管理员了 .. 管理员本身就有开发权限 .. 关掉这个绑定的窗口 ..

这里还有个体验者 .. 在这里你可以为小程序绑定一些体验用户 .. 这样在开发阶段 .. 这些用户也可以使用我们开发的小程序 ..

再看一下管理员 ... 这里会出现我们注册小程序帐号的时候绑定的管理员 ..

这里还有一个 开发者 ... 你可以在这里为小程序绑定的其他的开发者 .. 再返回到小程序的首页 ..

来自 https://ninghao.net/video/5031#info

微信给我们准备了一个开发工具，可以辅助我们开发，调试微信相关的东西 .. 打开 开发者工具 的下载地址 .. 这里可以选择适合自己系统的版本 ..

下载

我用的是 macOS .. 可以下载这个 mac 版的开发者工具 ..

另外微信还提供了 windows 64 位版的开发者工具，还有 windows 32 位版的开发者工具 .. 这些不同版本的开发者工具，使用的方法是一样的 ..

下载完以后，再去安装一下 ... mac 版可以直接把这个开发者工具放到 应用 目录的下面 ..

使用

然后再找到安装好的微信开发者工具 ... 打开它 ..

再用微信扫一下这里的二维码 .. 登录一下 ..

登录以后，会提示我们选择要调试的类型 .. 可以是本地小程序项目 .. 也可以是公众号网页开发 .. 选择这个 本地小程序项目 ..

添加项目 .. 在本地创建一个新的项目 ..

先要输入小程序的 ID ..

回到小程序首页 .. 查看一下小程序的详情页面 ..

打开 开发设置 ..

在这里可以找到小程序的 ID，复制一下 .. 再回到开发者工具 .. 先把 小程序 ID 粘贴过来 ..

再给项目起个名字 .. ninghaoDemo ..

然后选择一个项目在本地电脑上的位置 ..

在我的桌面上，创建一个新的目录 ... ninghao-weixin 创建 .. 再选择这个目录 ..

然后 添加项目 ..

如果看到一些错误警告，可以刷新一下 ... command + R .. Windows 上应该是 ctrl + R ..

左边这块是一个模拟器 .. 你可以在这里预览小程序的效果 .. 右边现在显示的是一个开发调试工具 ..

现在模拟器上提示一个授权 .. 因为小程序要读取用户的微信相关的信息 .. 点一下允许 ..

模拟器上出现的是一个微信小程序的演示应用 ..

编辑

这个开发者工具自带一个编辑器 ... 可以编辑程序里的代码 .. 打开 编辑 .. 左边是个树形结构 .. 会显示项目里的文件还有目录 ..

这个编辑器的样式可以设置一下 ... 在菜单里面，找到工具的设置 ..

打开 编辑器 .. 修改一下字号 .. 我想让代码的文字大一些 ... 改成 16 .. 行距可以是 6 ..

然后保存一下 ...

我们也可以使用自己熟悉的编辑器去编辑小程序的代码 .. 在命令行的下面，进入到项目的在的地方 .. 我这里就是桌面上的这个 ninghao-weixin ..

进来以后 .. 我用的是 Atom 编辑器 .. 可以使用这个编辑器打开项目的目录 ..

在编辑器的左边树形列表里面出现的就是刚才我们在开发者工具的模拟器里看到的那个演示用的小程序的代码 ...

来自 https://ninghao.net/video/5032

用开发者工具在本地创建了一个小程序，默认里面会有一些演示代码 .. 它就是一个基本的小程序 .. 小程序的主体部分主要有三个文件 .... app.js，app.json 还有一个 app.wxss .. 这几个文件要在小程序的根目录的下面 ..

app.js 是小程序的主要的逻辑代码 .. 先打开它看一下 ... 这里面使用了 App ，注册了一个小程序 .. 注册的时候给它一个对象 .. 里面可以放一些东西 ..

比如这个 onLaunch，它是小程序的一个生命周期函数 .. 这个 onLaunch 会在小程序初始化以后被调用 .. 我们可以把要在这个阶段做的事儿放在这个函数里面 ..

下面这个 getUserInfo 是个自定义的方法 .. globalData 是个数据对象 ..

这个 getUserInfo 方法可以在小程序的其它地方用到 .. 它做的事主要就是去得到用户相关的信息 .. 这里用了小程序提供的接口，getUserInfo ..

小程序还提供了一些接口，可以上传文件，得到用户的位置，用户设备相关的信息，可以用微信登录，还有支付功能等等 ...

这里用 getUserInfo 这个接口得到了用户相关的信息以后，会把信息放到一个全局数据对象里面，就是下面这个 globalData 里的 userInfo ..

app.json

app.json 是小程序的全局配置 .. 你可以在这个文件说明一下小程序里的页面，窗口的样式，还有标签等等 .. 比如这里就用了 pages ，说明了一下小程序里的页面 .. 这里有两个页面，一个是 index ，一个 logs ..

window 里面设置了窗口的一些样式 .. 看这些配置的名字，你应该能知道具体表示的是什么 .. backgroundTextStyle ，是跟文字相关的样式 .. light 是设置的值 ..

navigationBarBackgroundColor ，指的是导航栏的背景颜色 .. 现在导航栏的背景是白色 ..

navigationBarTitleText .. 是导航栏上的文字 .. 现在是 WeChat .. 改一下这个文字 .. 比如 ninghao.net .. 你会看到，现在小程序首页的导航栏上的文字就变成了 ninghao.net ..

app.wxss

再看一下 app.wxss，这种 wxss 后缀的文件里面的东西就是小程序用的样式 .. wx 是微信，ss 表示 style sheet .. 它跟我们平时用的 css 差不多 ..

这个样式文件里，给 .container 这个类定义了样式 .. 里面用了一些 flexbox 样式属性，宁皓网有 flexbox 相关的课程，你可以先看一下 ...

这里定义的样式，你可以在小程序的页面上用到 .. 比如在小程序的首页上就用到了这个样式 .. 可以先验证一下 .. 添加一个新的样式属性 .. background .. 把背景颜色设置成 #f8f8f8 .. 你会发现首页上某块区域的背景颜色会有变化 ..

来自 https://ninghao.net/video/5034#info

 

一个小程序页面有四个部分 .. 一个 js 文件，里面是页面的主要逻辑，一个 json 文件，里面是页面的相关的配置，一个 wxml 文件，wx 表示微信，ml 表示 markup language，这种 wxml 文件里的东西就是页面的界面 .. 它跟我们平时用的 html 差不多 .. 还有一个 wxss 文件，里面放的是页面上用的样式 ..

在开发工具创建的这个演示小程序里面，打开 pages ，它里定义了两个页面 ... 看一下 index 这个页面 .. 这个页面就是你看到的小程序的首页 ..

一个页面会有一个 js 文件，这个文件里的东西就是页面上的主要的逻辑代码 .. 这个 index 页面就是这个 index.js .. 这里用了一个 Page 注册了一个页面 .. 注册的时候提供给它一个对象 .. 里面可以添加一些东西..

比如这个 data ，是页面上可以用的一些数据 .. 这些数据的显示是页面的 wxml 文件控制的 .. 这种文件有点像是一个模板 .. 你会发现它跟我们用的 html 差不多，都是一些标签，上面有一些特别的属性 .. 只不过有些标签是小程序特有的 .. 比如 view ，text ..

这里用的样式 ... 比如这个 userinfo 类的样式 ... 都是在页面的 wxss 文件里定义的 ... 它其实就是小程序页面的样式表 ..

这些两组大括号里面的东西表示的就是要显示的数据 .. 比如这个 motto .. 在注册页面的时候 .. 这里有个 data .. 它里面有个 motto .. 对应的值是 Hello World ..

可以改一下 ... 设置成 hello ~ 保存一下 ... 在模拟器上，你会看到页面上显示的文字会变成我们设置的 hello ~

这个首页上的 wxml 文件里面的 userInfo 的 avatarUrl，应该表示的是用户头像的地址 .. 下面的 userInfo.nickName .. 是用户的昵称 .. 这些数据用的是小程序的 getUserInfo 接口得到的 .. 回到页面的逻辑文件 ..

这里用了一个页面的生命周期方法，onLoad .. 小程序页面加载以后会调用这个方法 .. 它里面就是用了 app 的 getUserInfo ，去得到用户的相关信息，得到以后，用了 setData ，把信息放到了 userInfo 里面 .. 这样我们在 wxml 文件里，就可以使用 userInfo 来访问用户相关的信息了 ..

这个 app 的 getUserInfo 方法，是我们在小程序应用里定义的 .. 就是这个 app.js .. 你会看到，这里有个 getUserInfo 方法 ... 它里面实际上就是用了小程序的 getUserInfo 接口来得到用户的相关信息 ..

在页面上的这个 app ，是用 getApp 得到的 .. 这个方法会返回小程序应用 ..

在这个 view 标签上面，用了一个 bindTap ，在这个元素上绑定了一个 Tap 事件 .. 处理这个事件用的是 bindViewTap .. 这个方法是在页面的 js 文件里定义的 .. 就是这里的 bindViewTap ... 它里面用了小程序的 navigateTo 这个接口，打开了另一个页面，就是 logs ...

在模拟器上可以试一下 ... 点一下页面上的用户信息，会跳转到小程序的另一个页面 ... 就是 logs 页面 ... 这个页面就是小程序项目的 pages 下面的 logs 里面定义的 ...

来自 https://ninghao.net/video/5035#info