小程序学习笔记(一)

小程序学习笔记(一)

关于小程序的认知,

  小程序作为微信为载体的负载应用,拥有广大的潜在流量群,在现在app泛滥与手机内存严重被闲置app占用的浪潮中,轻量化的集成应用成为主流,而小程序集合了广流量平台、轻应用以及web App的优势于一身,必将拥有广阔的前景,所以对于我们这些猿猿来说,学习小程序能让我们在行业中拥有更强的竞争力。

学习之前先附上小程序的官方文档,一些基本的注册流程及配置都在官方文档有详细说明,在此不做过多介绍!

浅谈小程序核心思想

① 小程序定义了自己的标签语言WXML,类似html的标记语言,标签是小程序的核心,我们通过标签将page对象中的data数据渲染到页面,但我们无法用js操作标签中的数据。

② 小程序定义了自己的样式语言WXSS,类似于css,less等文件。

③ 每个页面有一个json配置文件,通过配置此文件我们可以设置当前page的顶部bar的文字、样式以及按钮(如返回按钮)

④通过编写页面的js文件来处理用户的操作,整个文件。

⑤对于小程序的单个页面,一般由以上四个同名的文件组成,我们将页面的四个同名文件放在同一文件夹中作为一个页面模块,再在app.js主文件中的pages数组中配置页面路由(即加入对应页面的路径,注:文件不需要加文件后缀,因为我们的四个文件是同名文件),这样在编译的时候四个同名文件会被后台解析模块关联起来共同组成我们的小程序页面而不需要对它们的依赖关系进行引入。

 

学习过vue的同学应该对数据的双向绑定比较熟悉,而小程序每个page的data中的数据也有此特性,利用这一大特性,我们就可以解决js不能操作dom的问题。对于小程序的dom操作我们会结合官方API和数据双向绑定的特性,通过数据来驱动dom的操作。

 我们通过一个简单的例子来探讨下:

Page({
  data: {
    show:true
  },
  toggle:function(event){
  this.show = !this.show;
 } })
<view wx:if="{{show}}">内容</view>
<view bindtap="toggle">切换按钮</view>

我们通过对布尔数据show的转换来实现内容区域的显示与隐藏,从而实现了数据对于dom的驱动而摆脱了我们无法直接操控dom的困境。

小程序学习笔记(一)

上一篇:PC打开多个微信


下一篇:《Pig编程指南》一2.1 下载和安装Pig