小程序开发

Deadly 提交于 2020-02-05 10:15:21


小程序

项目结构与页面结构

在这里插入图片描述
对应我们的项目:
在这里插入图片描述
对于小程序的全局配置文件 app.jsonapp.wxss(遵循css语法),参照官方文档进行配置:全局配置全局样式
在这里插入图片描述

对于 app.js 会调用 App 方法创建小程序的实例对象,并定义应用的生命周期事件
在这里插入图片描述
图中在 App 方法中还添加了一个对象,并在对象中编写了一个 onLaunch 方法(程序启动时执行),我们可以改成如下的形式同样会执行:
在这里插入图片描述
在这里插入图片描述
总结如下:
在这里插入图片描述


逻辑层

逻辑层指的是:json 和 js文件。

json文件: 实现标签栏
在这里插入图片描述
js文件:
小程序额外提供的成员

  • App 方法:定义应用程序对象
  • Page 方法:定义页面对象
  • getApp 方法:获取全局应用程序对象(App)
  • getCurrentPages 方法:获取当前页面的调用栈(数组)
    • 调用栈:访问页面的记录,最后的就是当前页面

小程序额外提供的对象:

  • wx 对象:提供核心 api,参考 api

此外小程序 js 还支持 commonJS 规范
在这里插入图片描述
在这里插入图片描述


界面层

数据绑定:首先参考官方文档.
在这里插入图片描述

简单绑定

  • 内容
			<view class="container">
			  <text>{{messages}}</text>
			  <text>{{person.name}}</text>
			</view>
			Page({
			  data: {
			    message: 'Hello Moke!',
			    person: {
			      name: "MOKE",
			      sex: "male"
			    }
			  }
			})
  • 组件属性
		<view class="{{uiView}}"></view>
		data: {
		    uiView: "hello"
		}
		.hello {
		  width: 100px;
		  height: 100px;
		  background: red
		}
  • 布尔类型:如果不用 mustache,属性值默认识别为字符串
		<checkbox checked="{{false}}"> </checkbox>
  • 此外还可以用于:逻辑判断、算术/字符串运算、三元运算等等。

列表渲染

		//定义一个数组
		data: {
		    toDo: [
		      { name: "JavaSE", finish: true },
		      { name: "HTML", finish: false },
		      { name: "Spring", finish: false },
		    ]
		  }
		<!--可以通过 wx:for-item 改掉默认的 item 标签(wx:for-index)-->
		<view wx:for="{{toDo}}">
		    <checkbox checked="{{item.finish}}"></checkbox>
		    <text>{{index}}</text><!-- 下标 -->
		    <text>{{item.name}}</text>
		</view>	

事件处理

		<!-- 不同标签有不同的 bindxxx 事件属性 -->
		<button bindtap="buttonShownum">显示</button>
		buttonShownum: function (e) {
		    console.log(123)
		    console.dir(e)//以树状形式打印对象
		}

事件冒泡

		<!-- 嵌套的 bindtao 会产生冒泡,内部需要使用 catchtap -->
		<view bindtap="outterHandler" style="width:200px;height:200px;background-color:red">
    		<view catchtap="innerHandler" style="width:100px;height:100px;background-color:blue"></view>
		</view>
		outterHandler: function () {
		    console.log(1)
		},
		innerHandler: function () {
		    console.log(2)
		}

事件传参

		<!-- data-xxx 来定义传递的参数(可以有多个),名称带 - 会自动使用驼峰命名法 -->
		<button bindtap="buttonShownum" data-name="moke">显示</button>
		通过系统为我们提供的 e 参数进行传递
		buttonShownum: function (e) {
	    	console.dir(e.target.dataset)
	    }

在这里插入图片描述

单向数据流
在这里插入图片描述

		<!-- input 输入修改后,messages 会改变 -->
		<view class="container">
		  <input value="{{messages}}" bindinput="inputHandler"></input>
		  <text>{{messages}}</text>
		</view>
		inputHandler: function (e) {
		    console.dir(e.detail)
		    //区别于 this.messages = xxx,setData可以通知界面重新绑定数据
		    this.setData({
		      messages: e.detail.value
		    })
		}

条件渲染

		<view class="xxx1" wx:if="{{ 1 < 2}}">123</view>
		<view class="xxx2" wx:if="{{ 1 < 2}}">456</view>
		<!-- 也可以使用如下形式,block 可以作为 控制属性(wx:) 的载体,在渲染时没有实际意义-->
		<block wx:if="{{ 1 < 2}}">
			<view class="xxx1">123</view>
			<view class="xxx2">456</view>
		</block>

区别于 hidden 属性:hidden 只是隐藏代码还在,而 wx:if 不成立时代码不存在(未被渲染)。

WXSS与CSS的区别
在这里插入图片描述
样式导入其实 css 也可以实现,这里主要看下不同的尺寸单位:

  • rpx(responsive pixel): 可以根据屏幕宽度进行自适应

如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。


UI组件

详细可以看 官方文档,这里我们介绍一些使用较多的组件。
组件的效果可以在 WeUI,官方提供的预览界面看到。

基础内容组件

  • icon: 图标组件
  • progress: 进度条组件
  • rich-text: 富文本
  • text: 文本

示例

		<view class="container">
		  <!-- icon、progress、rich-text、text -->
		  <icon type="success"></icon>
		  <view class="test"><!-- 进度条不能在 class为默认容器下显示 -->
		    <progress percent="80" active /> 
		  </view>
		  <rich-text><h3>测试富文本</h3></rich-text>
		  <text>测试文本</text>
		</view>

在这里插入图片描述
表单组件

  • button: 按钮
  • checkbox: 复选框
  • radio: 单选
  • form: 表单
  • input: 输入框

操作反馈组件
例如底部弹起的操作按钮组件,在 官方扩展组件中。

导航组件

  • navigator: 页面链接,用于实现页面跳转
    • 页面传值:

    页面跳转传值:<naigator url="…/index2?id=1"></naigator>
    页面获取值:
    Page({
    data: {}
    onLoad: function(options){
    //初始化页面函数,options 就是页面带过来的参数
    }
    })

    • 也可以通过 wx.navigateTo 函数进行跳转

布局组件
view 是常用的视图容器,可以使用CSS3中出现的伸缩布局:

  • 设置:display: flex;
  • 横向:flex-direction:row
  • 纵向:flex-direction:column

swiper 可以实现选项卡或者轮播图等。


API

小程序官方给我们提供了许多 API,只需在调用时查看即可,这里看下常用的。
参考小程序开发文档:API

发送请求: 参考

		onLoad: function(options){
			wx.request({
				url: 'https://api.douban.com/v2/movie/in_theaters',
				header: {
					'Content-Type': 'json'
				},
				success: function (res){
					console.log(res)
				}
			})
		}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!