微信小程序开发基础

文章目录

前言
一、页面组件（WXML）
二、小程序配置（json）
- 1. 全局配置
- 2. 页面配置
- 3. sitemap 配置
三、小程序配置（WXSS）
四、逻辑层（js）
- 1. 啥是逻辑层？
- 2. app.js的App方法
- 3. pages.js页面逻辑
- 4. 数据绑定
- 5. 列表渲染(循环)
- 6. 条件渲染(if)
- 7. 事件绑定

前言

从json、wxml、wxss、js四个方面总结一下小程序开发工程中的基础知识点。

学习笔记，欢迎指正。

一、页面组件（WXML）

WeiXin Markup Language

1.<view>标签用于定义视图容器与<div>类似。

2.<text>文本标签，行内元素类似span。可以嵌套一个<text>比如一段文本中某些字体颜色要变。1.也可以写入文本但是它没有换行效果。

3.<input>输入框。input组件显示为空白，因为默认样式没有边框，单击input组件光标闪烁即可输入。它有四个属性，默认text输入的是文本，弹出标准键盘。<input type="number"/>表示在单击输入框时下方弹出输入数字的键盘。

其他三个属性	对应的效果
idcard	身份证输入键盘
number	数字输入键盘
digit	带小数点的数字键盘

4.swiper滑块视图容器，主要用于轮播图。默认大小：宽度100% 高度是150px 需要自定义设置大小。其中只可放置swiper-item组件。属性详情参见开发者文档

5.scroll-view:可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

6.icon:图标。组件属性的长度单位默认为px。<icon type="success" size="93"></icon>即是一个绿底白勾的圆形通过符号。更多type

7.progress:进度条，更多可参考开发者文档。组件属性的长度单位默认为px。<progress percent="20" show-info stroke-width="3"/>
8.
9.<button>按钮</button>button属于表单组件

<button size ="mini" type='primary'>按钮</button>

type属性在开发者文档里解释为颜色

<button open-type="share">转发按钮</button>

open-type属性是指微信开放能力，包括转发、获取用户信息、获取手机号、打开app之类的。

10.导航
navigator：页面链接页面跳转 <navigator url='页面路径'></navigator>
open-type属性的合法值有如下：
（1）navigate:默认跳转方式。保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
（2）redirect:关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
（3）switchTab:跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
（4）reLaunch:关闭所有页面，打开到应用内的某个页面。
（5）navigateBack:关闭当前页面，返回上一页面。
（6）exit:退出小程序，同时在标签里加上target="miniProgram"时生效。

二、小程序配置（json）

1. 全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
详细配置文档
1.pages页面路径

2.window窗口：用于设置小程序的状态栏、导航条、标题、窗口背景色。文档挺详细的不赘述。（window的background是要下拉才能看见的颜色。）

3.style：微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 “style”: "v2"可表明启用新版的组件样式。

4.tabBar配置:窗口的底部或顶部有 tab 栏可以切换页面。
如图:

2. 页面配置

直接就用{}在json文件里写属性和值就是了，全局配置的window里面的属性都包含(此时不用写”window“:{}直接{}写属性)。比较常用的时pages页面路径那张图的windows组件花括号里的几个。

json里面不能写注释
json还不能调用云开发的图片

3. sitemap 配置

用的不多看文档吧。

三、小程序配置（WXSS）

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：
尺寸单位
rpx（responsive pixel响应式像素）: 移动端网页像素单位的换算难点在于它有物理像素和逻辑像素两种单位。物理像素是指屏幕实际上有多少个像素，而逻辑像素是指CSS中使用的像素单位。为了方便开发人员适配各种手机屏幕，微信小程序在wxss中加入了新的尺寸单位rpx。为了方便换算rpx单位，规定任何手机屏幕宽度为750rpx。
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

四、逻辑层（js）

1. 啥是逻辑层？

整个小程序的框架分为逻辑层（JavaScript）和渲染层（视图层(wxml,wxss)）。逻辑层用来处理数据，渲染层再把数据显示在界面上。小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。

2. app.js的App方法

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，他接受一个参数，通过参数指定生命周期回调、错误监听和页面不存在监听等。若要在小程序启动、显示、隐藏时执行某些操作，可以通过App()函数来实现。App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。 可以通过getApp方法获取全局唯一App实列，获取App上的数据或调用App上的函数。app.js里·还有一个全局变量globalData:{}

3. pages.js页面逻辑

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册。内容包括：

data变量指定页面的初始数据
生命周期(从创建到销毁)回调函数，小程序自动创建
自定义函数
事件处理函数等

4. 数据绑定

WXML 中的动态数据均来自对应 Page 的 data。数据绑定就是把data里的数据放到wxml上。
先在js里写上

Page({data: {message: 'Mustache',id:0}})

然后wxml上写

<view> {{ message }} </view>
<view id="item-{{id}}"> </view>

页面显示就是：
Mustache

5. 列表渲染(循环)

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
wxml里：

<view wx:for="{{array}}">
{{index}}: {{item}}</view>

js文件里：

Page({data: {array: ['这个博主','真的帅']}})

多重循环的时候还需要用到一点：
使用 wx:for-item 可以指定数组当前元素的变量名，

wx:for 也可以嵌套，下边是一个九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view>

没完，还有个快捷用法将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}"><view> {{index}}: </view><view> {{item}} </view></block>

6. 条件渲染(if)

wx:if="" 判断是否需要渲染该代码块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

这里也可以用block控制多个标签。

7. 事件绑定

在组件中绑定一个事件处理函数。
最常用的bindtap，当用户点击该组件的时候会在该页面对应的js文件里的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

在相应的Page定义中写上相应的事件处理函数，参数是e。

Page({tapName: function(e) {console.log(e)}})

这是一个简单的基于云开发的微信小程序校园二手交易和失物招领https://gitee.com/hitberlin/we-chat感兴趣的可以下载练练手。

微信小程序开发必备知识点相关推荐

微信小程序开发【知识点大全】
微信小程序开发重点知识点 token appid openid AppSecret 快捷键知识点 token 有些接口是可以公开访问的,有些是不允许公开访问的,所以要设置token进行区分验证. ...
微信小程序开发必备的八个插件
wechat-snippet 微信小程序代码辅助,代码片段自动完成 minapp 微信小程序标签.属性的智能补全(同时支持原生小程序.mpvue 和 wepy 框架,并提供 snippets) wxa ...
微信小程序开发必备 hellow word
打开web开发者工具,新建一个纯净的项目(上一篇有建立项目),不要勾选quick start 这样就是一个什么都没得的项目! 按照目录结构建立文件 welcome.wxml文件 <!--wxml ...
微信小程序开发知识点总结
微信小程序开发知识点总结微信小程序的目录结构 1.外联公共样式的方法根据微信的官方文档,是支持@import的方式一如外联的公共样式的使用@import语句可以导入外联样式表,@import后跟 ...
微信小程序开发，基础知识点汇总详解
目录一.目录中文件说明 1.app.js文件 2.project.config.json文件 3.sitemap.json文件 4.页面中的.json文件 5.如何创建小程序页面二.微信中代码的格 ...
微信小程序开发已经成了互联网创业的必备神器
今年第一季度,微信月活用户达到了10.4亿人,几乎可以看出每个人的移动设备中几乎都安装了微信.如今微信已经成为人们在移动互联网上活动的最重要的工具.小程序自2017年1月9日上线以来,经过一年多的更新 ...
前端—微信小程序开发
随着微信的普及和微小程序的广泛应用,微信小程序开发越来越多受到人们的关注,正在成为新工科和人工智能背景下当代大学生的必备技能. 适应对象该课程适合电子信息类专业学生进行学习. 微信小程序开发课程共六 ...
微信小程序开发：微信小程序生命周期总结
前言在微信小程序开发中,关于微信小程序API的使用是必备技能,但是关于微信小程序的生命周期也是首先要了解和掌握的知识点.尤其是现在的前端开发领域,关于前端的各种框架和技术都要会,而且微信小程序的语法 ...
微信小程序开发视频教程新鲜出炉
微信小程序开发公测了,可是对于新手来说,不同的框架不同的开发机制,如何快速适应呢?微信小程序开发视频教程新鲜出炉了,从零开始一步一步搭建微信小程序,每个章节都会涉及到不同的知识点,等教程学习完你不但掌 ...

微信小程序开发必备知识点