美高梅官方网站3045-mgm6608美高梅app下载
[百家争鸣] 微信小程序全国巡回沙龙厦门站-尚琳凯演讲详细内容实录

[百家争鸣] 微信小程序全国巡回沙龙厦门站-尚琳凯演讲详细内容实录

作者:mgm美高梅 官方网址    来源:未知    发布时间:2020-01-18 21:22    浏览量:

图片 1

尚琳凯:谢谢大家,很高兴能够在这里跟大家见面。刚才看了有很多女生,也有很多程序员,很开心有这么多的同类在一起。

本文同步发布在 https://www.cssge.com

从内测到开启公测,微信小程序已然成为了IT领域最为火热的话题,除却不同类型应用的可能性探索之外,对于开发团队而言,最多的当属踩过的那些坑。近一段时间,CSDN也在为知识库项目进行小程序开发的初步尝试,对此,CSDN 高级研发工程师尚琳凯在一次线下活动中分享了知识库小程序开发的一些经验,本文为扼要总结。小程序为开发者提供了什么什么是小程序小程序是微信推出的一种新的公众号的形态,不需要下载安装,即可在微信中使用的应用。同时,需要注意的是,小程序、订阅号、服务号、企业号是并行的体系。以下为 CSDN 知识库推出的“微信开发”知识图谱,能够更好地帮助读者了解微信小程序在微信开发中的位置。点击下载高清知识图谱微信小程序 MINA 框架小程序提供了一个框架,微信称之为“MINA”,这个框架主要分两个层面,视图层和逻辑层。框架的核心是一个响应的数据绑定系统。WXML 中的动态数据均来自对应 Page 的 data,这个数据绑定是单向的,只有数据发生变化,视图才会做出相应的调整。这种模式,让开发者专注于事件处理上,改变对象状态,实现视图更新。为了方便以及限制开发者开发,微信自己定义了一系列的基础组件,就是视图层的组成单元,组件自带一些功能与微信风格的样式,类似 HTML 标签。微信还提供了很多的原生API,用来调用微信内部提供的功能,以及一个微信小程序开发者工具。微信小程序源码结构:视图层逻辑层配置文件在小程序中,微信规定了界面的组成模式,由四个文件组成:.wxml 文件标签语言,类似 HTML,真正负责页面结构的文件,可以绑定数据;.wxss 文件类似 CSS,大部分 CSS 样式都相同;.js 文件用来运行我们的逻辑,使用 JS 语言;.json 文件主要配置公用的样式,比如 Tab 栏、窗口样式等。知识库小程序开发知识库小程序开发的初步尝试关注重点是 JS 文件和 WXML 文件。由于知识库把开发领域细分成某个领域,例如技术语言、运维系统、行业应用等方面,对每个技术和知识点都设计一个网状图谱,来总结技术某一方面涉及到的知识,同时为知识结构准备一些精品的内容,方便大家更系统的学习知识。所以在知识库这个产品上,需要实现内容推荐、个人中心以及搜索。用户侧和内容推荐都包括四层:库-》知识结构-》内容列表-》内容详情页。搜索功能可以根据搜索的关键词查找到用户侧或推荐知识库的相关内容,方便大家阅读或收藏。知识库页面设计小程序组件满足了所有的显示功能和结构,API 齐全,便于逻辑开发。不同的功能模块放在不同的页面里,具体表现为:视图层: Tab 栏,列表页,知识结构页,内容详情页,搜索页逻辑层: Tab 栏-通过绑定数据index选择一级页面;列表页-通过改变绑定数据contentlist数组,控制列表显示和动态加载;搜索页-通过绑定数据searchValue,通过事件及时获取用户输入。小程序开发路上踩过的坑1.打开页面数量限制微信提供 Tab 栏的设置,可以在app.json中配置,在 App 里配置的 Tab 栏将出现在所有的一级页面。但是它有一个问题就是第一次点击 Tab 将会打开一个新的页面,微信对打开页面的数量限制是五个。微信提供了几个页面跳转的方式,redirectto、navigateto,还有返回。重点说这两个,redirectto会直接在原页面上打开新页面,navigateto会新开启一个页面。由于微信在页面数量上有限制,我们产品的层级有比较多,导致无法直接在app.json设置 Tab 栏。所以我们把 Tab 栏单独设计出来。点击 Tab 不开启新页面。在每个初级页面都引用进去,之后二级三级的页面上不使用 Tab 切换,而是需要返回到初级页面。2. 树状结构的展示每一个库都有一个树状的知识结构,大家请看这个例子。每个层级展示的方式是一样的,所以正常情况下,我们都会选用递归的方式来使展示。比如在这张图里,当我们判断这个节点拥有子节点,就想再次调用同样方法显示。但是很遗憾,小程序里,不论是使用模板,还是使用include的方式引用文件,都没有办法做到自己调自己。幸运的是我们知道层级最深有多少,这样就可以写几个同样的文件和模板,加上不同的命名来调用。如果是未知层级的树状结构,就会非常难以处理。在这里可以建议大家将树状结构变成数组的形式,加上层级标识,在 WXML 文件中可以使用循环的方式来处理层级的显示。3. HTML页面在微信小程序中展示这是一个非常难处理的问题,微信不支持 HTML 页面的展示,所以需要把所有 HTML 的标签转化成小程序内允许的标签。我们使用了一个名叫wxParse的应用,它的功能就是通过正则表达式将 HTML 页面转化成 JSON 形式,再用模板的方式展现出来。在这里面规定了各个标签的样式。遗憾的是它也有层级方面的问题,同样是重复写了很多完全一样的模板。HTML转JSON工具转化后的HTML页面顺序调用如果 HTML 的标签层级结构超出了模板个数,那么超出部分将无法显示出来。这个应用是在微信中运行的,建议大家把数据转化放在服务器端来进行,将转换后的数据发给小程序。另外小程序setData()一次不能超过1024K,如果你的 JSON 格式数据超过这个限制,就会很难再拼接。4.冒泡事件一个组件上的事件被触发后,该事件会向父节点传递,由此引起不必要的逻辑处理,对此,使用费冒泡事件处理。5.网络请求接口wx.request()没有携带 Cookies如果服务器端有通过获取 Cookies 处理的逻辑没办法和小程序结合,只能为小程序单独开发新的接口。微信发起网络请求 API总结小程序在运营上的优势在于微信用户量大,适合推广,某些功能单一的 App 可以在小程序中实现,不用再下载 App。开发者不用考虑平台,开发成本低。但同时不适合开发逻辑复杂界面丰富的程序,受到框架限制,随意性小,无法满足所有功能。

图片 2

因为下个项目需要用微信小程序来开发,所以就找了小程序开发文档来研究。下面记录一下微信小程序的主要开发流程和语法。

我叫尚琳凯,来自CSDN,我是一位研发工程师。来跟大家分享一下微信小程序开发上有什么心得以及踩过什么坑。

账号注册

开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。注册地址~点我点我,注册过程这里就不说了,按照要求一步一步来就行了。

注册成后,登录小程序管理平台,在这里你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。

图片 3

我们可以在菜单 “设置”-“开发设置” 可以小程序的 AppID 。

图片 4

小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID。

有了账号,我们还需要一个开发工具来开发小程序。

一开始,我想先向大家介绍一下,微信小程序到底是一个什么样的东西,以及框架,以及原码结构。然后是微信小程序知识库开发,最后做一个总结。

安装开发工具

前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!

关于微信小程序官方是这样定义,微信小程序是一种新的公众号的形态,它不需要下载,也不需要安装,就可以在微信里打开。和订阅号、服务号企业号是并行的体系。能够交互的平台一个是微信自己的平台,另一个是我们开发者第三方平台。

框架介绍

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

微信平台提供的是微信基础服务,比如用接口获取用户的信息,还可以调取获得用户信息的接口。还有一个小程序管理。一个小程序开发以后我们需要放在一个平台上,这个平台它提供给用户的功能就是告诉用户你是以什么样的方式来进行搜索的,以关键词的方式在这里面可以匹配到相应的小程序,或者是通过扫描二维码直接搜索打开的形式来使用。

响应的数据绑定

框架的核心是一个响应的数据绑定系统。

整个系统分为两块。视图层(View)和逻辑层(App Service)。

框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。

下面看个简单的

下一篇:没有了
友情链接: 网站地图
Copyright © 2015-2019 http://www.zen-40.com. mgm美高梅有限公司 版权所有