2018/2/2 20:00:27当前位置推荐好文程序员浏览文章

概念

小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。

可以理解成一套嵌套在微信里面的app,和原生app不同的是不需要下载,属于小而轻的应用。

开发前的准备

1、注册账号
2、下载开发者工具, 下载1.02.1801081这个版本的,最新版的有bug,编译的时候调试器Wxml窗口会出现空的page标签,里面没有内容。编辑器内复制也会偶尔失效。

下载版本

3、注册好后登录下微信公众平台,在设置里找到开发设置,把appID保存下来,一会开发的时候需要用到

appID

快速开始

1、此时,工具有了,ID有了,接下来开始我们的撸码之旅。打开开发者工具,扫码登录后选择小程序项目,点击右下角的加号,创建新项目,选择项目目录,填写appID,项目名称,写好后点击确定。


小程序管理填写信息

2、确定以后,默认打开后,发现给我们创建了一些代码,代码一会我们再讲。


目录.png

页面是空白的,打开调试器后发现页面有报错,如下

image.png

点击右上角的详情,修改下配置,把调试基础库改成1.9.1,然后把不校验安全域名、web-view 域名、TLS 版本以及 HTTPS 证书勾选上,不然我们的请求就必须得是https的了

修改配置

3、此时控制台没有报错了,页面展示如下,点击按钮,我们可以看到微信授权,点击允许,我们的头像和昵称就显示在页面上了

页面展示.png用户信息展示

项目结构

我们主要看app.jsapp.jsonapp.wxss三个文件和pages文件夹里面的wxml

1、app.js做为小程序的入口,里面有个App实例,每个小程序只会有一个App实例,小程序启动以后触发onLaunch函数执行,获取用户信息

2、app.json是小程序的所有全局配置,pages字段放置所有页面的路径,window字段定义所有页面的顶部背景颜色,文字颜色 详细配置请戳这里👇

3、app.wxss文件就是页面公用的样式,仅支持部分css选择器

4、wxml就是我们的HTML文件,常用标签为 viewtext 等,没有所谓的divspanp一类的标签了,我们习惯称它们为组件

设计理念

小程序内部可以理解成一个mvvm的框架,分为逻辑层和视图层,逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。

// pages/test/index.jsPage({  data:{  // 页面的初始数据      text: hello world  },  onLoad(){    console.log(hello)  },  change(){    this.setData({    text:hello  })  }})

使用Page函数来注册一个页面,接收一个Object参数。
这里我们使用了onLoad来监听页面的加载和定义了一个change函数
并使用setData函数将text的值进行更改

更改data数据的时候必须调用setData函数进行更改

// pages/test/index.wxml<view>{{text}}</view> //  显示hello world<button bindtap="change">点击更改上面文字</button> //  显示hello 

我们在button组件上添加了点击事件,调用了change函数,完整事件请戳👇这里

事件传递参数

有时候我们需要触发事件的时候,传递一些参数,那小程序怎么传递呢?很不幸,小程序不能类似js里面直接传递,往往我们需要将传递的数据绑定到事件元素上

// index.wxml<button data-test="哈哈"  bindtap="change">点击我</button>

使用e.currentTarget.dataset来获取值

// index.jschange(e){  e.currentTarget.dataset.test  // 哈哈}

setData函数拓展

1、修改嵌套多层的数据,
如果是写死的参数可以使用引号将参数包起来

this.setData({    text.msg: hello})

如果是传递进来的值呢?很简单将data的key用[]括起来

// index.wxml<button bindtap="change" data-key="text.msg">点击我</button>
// index.jschange(e){var key = e.currentTarget.dataset.key  this.setData({    key: hello     // 数据不会更改  //  [key]: hello //  数据会更改  })}

路由

小程序里面所有的页面路由由框架进行管理

我们可以使用getCurrnetPages函数获取当前页面栈的实例,返回一个数组, 最后一个元素为当前页面

小程序定义了五个用于导航跳转的API,这里列举两个常用的,详细请戳👇这里

1、wx.navigateTo 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面

wx.navigateTo({url:`/pages/text/index?text=${121212}`})

2、wx.redirectTo 关闭当前页面,跳转到应用内的某个页面

wx.navigateTo({url:`/pages/text/index?text=${121212}`})

通过上面的API跳转带的参数,在页面上我们需要怎么获取呢?

// text.jsPage({  data:{     ... // 页面数据  },  onLoad(options){    console.log(options.text)  // 121212 获取上个页面带过来的值  }})

数据过滤 过滤器

如果你使用过vueangular框架,对|管道符肯定不陌生,它用来对我们的数据进行转换,那小程序里面有没有过滤器呢,不过这个是真没有。

但是目前有两种方法,可以实现过滤。

1、获取数据的时候,直接改了,干脆利落、好不优雅。
2、使用最后我们要介绍的wxs

WXS

WXS是小程序的一套脚本语言,首先和js是不同的语言,其次运行环境和js也是隔离开的,wxs不能调用js文件中的函数,也不能调用小程序的API,它主要用来增强wxml。

wxs不能使用es6语法,人家不是js啦😷

接下来我们来实现一个使用wxs实现一个简单的过滤器
1、首先我们创建filter.wxs文件并写入以下内容

// filter.wxsvar Filter = {  getSatusStr: function(num){    var str = ;    switch (num) {      case 0:        string = 我是0的状态        break;      case 1:        string = 我是1的状态        break;      default:        string = 我是默认的状态        break;    }    return str  }}module.exports = {  status: Filter.getSatusStr}

同级下index.wxml使用

<wxs module="filter" src="./filter.wxs"></wxs> <view wx:for="{{list}}">  <view>{{filter.status(item.status)}}</view>  </view>

总结:
1、每个wxs标签都有一个module 属性
1、wxs可以写在wxml里面的wxs标签里和.wxs文件里
2、wxs文件中引入其他wxs文件时候,可以使用require函数,接受相对路径
3、在wxml标签里使用外部wxs文件的时候,src属性是相对路径

tip

1、使用sass写wxss文件,在目录下创建index.scss文件,当前目录下执行 sass --watch index.scss:index.wxss --style expanded

2、wcss 文件里面不能使用本地图片,请使用base64、网上图片或者image

3、修改页面的背景,类似与css中设置body,可以直接设置page

4、不要直接操作this.data,使用this.setData函数,切记、切记

网友评论