嵌套div从边缘开始_小程序-从零开始

最新推荐文章于 2022-03-15 18:50:52 发布

weixin_39616090

最新推荐文章于 2022-03-15 18:50:52 发布

阅读量131

点赞数

文章标签：嵌套div从边缘开始

所在项目组没有前端，所有同事均为后端RD，最近机缘巧合协助其他部门开发一个小程序(七牛财富-快讯)，需要独自前后端一起开发，开发完成项目后编写此wiki进行开发总结，本文仅起到从0到0.1简单介绍一下小程序框架的入门作用，若有疏漏错误之处万望指出。

了解小程序

小程序一般指微信小程序，不过支付宝之前也推出了蚂蚁小程序，二者大同小异，框架结构基本一致，github上甚至有命令行一键转换工具，因此这里一起做介绍。

小程序分为app、page两层，【app】由app.js(小程序逻辑，一般放一些全局调用的逻辑，比如进入小程序获取设备信息、用户登陆信息等)、app.json(小程序公共配置，比如标题、颜色等，另外小程序包含页面也需要在这里声明，第一行路径的文件默认为首页)、app.wxss(蚂蚁为app.acss，小程序公共样式，非必需)，用来描述整体程序。

【page】用来描述各个页面，由四个一组的文件组成，与传统web页面对应关系如下：

对应关系

每个页面都由四个在同一路径下的同名文件组成，小程序框架会自动关联同一个路径下的同文件名结构、样式、逻辑和配置文件。下文将着重以微信小程序框架来进行介绍。

前期准备

小程序核心是一个响应式数据绑定系统，逻辑上分为视图层和逻辑层，框架提供了自己的视图层描述语言，以及基于 JavaScript 的逻辑层，并在视图层与逻辑层间提供了数据传输和事件系统，二者数据同步。开发之前需要先下载平台开发的专用开发者工具。

蚂蚁开发者工具微信开发者工具

通过开发者工具可以完成代码编写、本地调试、真机预览，程序发布，微信开发工具还提供了自动化测试等功能。使用开发者工具前需要先注册申请APP_ID(也可暂时使用测试ID，上线前申请)，如果是使用已有APP_ID进行开发，需要管理员将个人微信号添加开发者权限。之后创建项目，可选择是否建立模板，开发者工具会自动创建目录结构和两个简单的初始页面。

新建小程序项目

开发者工具页面

开始开发

视图层：

只要有过html/css/js开发经历，很快就能上手小程序开发，比如微信小程序负责页面结构的wxml文件，由各种类html标签构成，直观上最大的不同应该是小程序引入了视图容器，以我的理解可以把这个标签当成html标签中的div，小程序页面中的各个组件都可以用视图容器view包起来，便于页面排版。至于一些变量的展示则通过双大括号+变量名呈现，比如{{userInfo.nickName}}，其他的if判断for循环之类则通过在标签内部使用wx:if={{}}、wx:for{{}}来渲染实现，总体上类比smarty之类的前端处理方式，可以很快熟悉。除此之外还可以引入模板、绑定事件与逻辑层进行通讯等等。

视图层结构

而页面样式的wxss，样式属性的控制基本和原生css完全一致，基础属性比如color、margin、padding等都可以通用，暂时没有发现不支持的情况。另外还有一些小程序特有属性，比如尺寸单位rpx(针对手机屏幕像素数量划分750份自适应)之类的。另外微信也提供了基于weui的大量标准样式，比如按钮、画布、toast等等，可以直接使用这些基础组件，提高开发效率。

看文档还有WXS(WeiXin Script)，wxs 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。本次开发并没有用到，所以也没做深入研究。

逻辑层：

小程序逻辑层基于JavaScript，在此基础上增加了App、Page方法，具体可以参看小程序官方文档。通过逻辑层js与后端接口交互，不论是ajax、post、get操作都与原生js方法区别不大。

接口

App

Page

另外逻辑层提供了丰富的API，分为网络、媒体、文件、数据缓存、位置、设备、界面、开放接口等等几大类，有需要时可通过文档查询。在这里举一个常用的例子：所有微信用户都对应一个唯一标识openid，获取用户ID往往是一切用户层面操作的基础，而微信不会直接将openid给出，默认只给一个临时的登陆凭证code，需要我们拿这个code拼接上小程序的appid和appsecret去换取，GET方法去调用微信的登陆接口，之后才能获取到用户ID。

后端代码

发布

小程序最初限制整个代码包大小为1M，去年改成了2M，并且支持分包加载，最大不超过8M即可。

开发完成后，通过开发者工具上传，再登陆开放平台将上传的代码包提审。

踩过的坑

长期写后端代码，js一直比较弱，七牛财富小程序的列表页是是以天为单位来展示新闻摘要，因此在PHP使用关联数组将数据传到了小程序前端逻辑层，后端组织数据时以日期为key，当天新闻为value再封一个索引数组，通过嵌套wx:for循环渲染出来，下滑加载下一页，使用了cancat做数组拼接。调试中出现无法加载第二天及之后的内容，js报错。后来发现是因为cancat只能拼接索引数组，js把关联数组当成对象处理，需要用Object.assign()拼接。

demo

七牛财富刚开始的需求是用户先授权头像、昵称，再授权手机号。目前微信已经放开权限，不经过用户授权即可通过open-data type="userAvatarUrl"/"userNickName"获取到头像、昵称，所以第一次授权省去了，接着做第二次授权，代码写完后调试发现微信报错，无权限。获取手机号的话，除了需要账号主体为公司之外，还需要进行认证(给微信打300块钱)，两者均满足才可以。