微信小程序实战:美团点评核心功能业务逻辑实现

前言

微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

微信小程序的框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。

框架入门

在小程序的框架逻辑里面, 你需要通过注册程序主题与注册程序页面来得到一个完整的小程序.

在程序主体, 通过 app.js, app.json, app.wxss 来控制程序的初始化逻辑和公共设置.

在程序的页面. 通过 page.js, page.json, page.wxml, page.wxss 来控制页面逻辑与内容. 当然页面的名字不一定是 page, 以上不同后缀文件有共同的名字, 并放在一个文件夹下即可.

这是一个典型的小程序框架目录结构. 在标记 1 处是我们的页面相关文件, 不同页面放在不同的文件夹下. 在标记 2 处是程序主体相关的文件, 而 project.config.json 则用于保存微信开发者工具的配置.

除了创建页面文件, 你还得让小程序知道你拥有什么页面, 在什么地方. 这需要你到 app.json里面配置的 pages 字段进行声明, 比如下的配置:

在 pages 数组里, 意在说明, 这个程序有两个页面, 在什么地方, 第 0 个元素就是首页.

注册程序和页面则是在 js 文件, 注册程序在 app.js, 需要运行一个 App()函数, App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。
例如:

注册页面需要在 页面的 js 文件里面, 使用 Page() 函数来注册. Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

例如:

.

关于页面更新:

在微信小程序里面使用响应的数据绑定. 使用有过 react 或 vue 的使用经验会快速适应这种方式.

在页面的 js 文件里面, 注册页面的时候, 传递的对象参数里的 data 字段用于声明所需要绑定的数据:

如:

  1. // This is our App Service.
  2. // This is our data.
  3. var helloData = {
  4. name: 'WeChat'
  5. }
  6. // Register a Page.
  7. Page({
  8. data: helloData,
  9. changeName: function(e) {
  10. // sent data change to view
  11. this.setData({
  12. name: 'MINA'
  13. })
  14. }
  15. })

在 wxml 文件里面, 用于声明页面结构, 并进行相应的数据绑定:

  1. <!-- This is our View -->
  2. <view> Hello {{name}}! </view>
  3. <button bindtap="changeName"> Click me! </button>

授权流程处理

在小程序的业务开发中, 或多或少会涉及到一些授权操作. 在随着开发者的实践, 授权的流程与方式经过了一下调整与改变之后, 现在已经基本稳定.

在这张表里面, 要获取表里列出的信息需要相应的授权:

从授权流程方式上来说, 获取用户信息和其它信息会有不同.

获取用户信息需要在页面放置一个 button 按钮, open-type 设置成 getUserInfo. 点击按钮会弹出授权弹框, 拒绝之后再次点击, 还会再次弹出弹框. 在获得允许后, 会在 按钮 bindgetuserinfo 事件的事件对象获得用户信息.

一旦获得用户授权, 还可以使用 wx.getUserInfo API 来获得用户信息.

而其他信息的授权, 需要在起信息获取的相应 API 调用时, 在授权弹框进行相应的操作. 在获得运行后, 会直接打到用户信息.
除此之外 使用 wx.authorize API 也可以进行相应授权操作, 但仅仅用于授权, 不能获得相应的信息.

一旦使用 API 接口期望获取授权, 被拒绝后, 短期内再次调用会直接失败.

在授权相关的 api 中, 你可以使用 wx.getSetting API 来事先知道哪些东西呗授权, 哪些东西之前没有进行过授权操作, 以及哪些东西之前被拒绝过.

一旦被拒绝, 如果想在短期内期望获得用户授权, 可以在页面放置一个按钮, open-type 设置为 openSetting, 这样点击按钮后会出现一个授权面板, 进而对授权进行操作.

以上就是小程序框架和授权流程的一些介绍. 欢迎大家在今后的实践当中一起交流.


文字看得不过瘾?想看视频?到这里来观看吧:

视频地址:

https://study.miaov.com/study/remote/chapter/457


进群方式:关注公众号,发送 “vip进群” 关键字,联系我们加入 VIP 微信学习群

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
联系我们

点我咨询QQ客服

010-57269690

在线微信客服
客服1
客服在线时间

工作日:9:30~18:00

周六:10:00~17:00

妙味公众号