1. 首页
  2. 小程序

初探微信小程序之小白入门

啰里八嗦

昨天上班第一天,没错,是第一天。公司今年放假很足,撒泼的我无(tian)忧(bu)无(zhi)虑(chi)的度过了漫长的十一天,上班了发现自己得了节后综合症,这病严重吗?嗯,估计得有个礼拜才能痊愈。

所以,放假休闲的程序猿一定要感到深深的罪恶感,为了啥?为了不生病,为了啥?

初探微信小程序之小白入门

没出正月,都在年里,给大家拜个晚年,祝大家晚年幸福。

扯了会,接下来咱们开始正文,说点有用的。

概念

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

可以理解成一套嵌套在微信里面的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.js Page({ data:{ // 页面的初始数据 text: 'hello world' }, onLoad(){ console.log('hello') }, change(){ this.setData({ text:'hello' }) } })

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

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

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


// pages/test/index.wxml,JS中文网 - 前端进阶资源分享(www.javascriptc.com) <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.js change(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.js change(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.js Page({ data:{ ... // 页面数据JS中文网 - 前端进阶资源分享(www.javascriptc.com) }, onLoad(options){ console.log(options.text) // 121212 获取上个页面带过来的值 } })

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

数据过滤 过滤器

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

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

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

WXS

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

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

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


// filter.wxs var 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函数,切记、切记

作者:小心夹手
链接:https://juejin.im/post/5a950848f265da4e8a32172a

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:初探微信小程序之小白入门

链接:https://www.javascriptc.com/2519.html

« 小程序多端框架全面测评
两小时快速构建微信小程序»

相关推荐

QR code