Skip to content

小程序-01 小程序入门

一、注册小程序

  1. 注册账号:mp.weixin.qq.com
  2. 小程序的特点:不需要安装就可以使用;

注册注意事项:在选择服务类目时,不能选择游戏,否则以后就不能修改,其他可以修改;

二、小程序目录结构

  1. 一个小程序主体部分由三个文件组成,必须放在项目根目录;
├── app.js    # 项目入口文件,小程序逻辑
├── app.json  # 小程序公共配置
└── app.wxss  # 小程序公共样式表
  1. 一个小程序页面由四个文件组成:
  • js ---- 页面逻辑

  • wxml ---- 页面结构,相当于html,在页面结构html大部分标签都不能使用;

  • json ---- 页面配置

  • wxss ---- 页面样式表

三、全局配置(配置窗口信息)

在app.json文件填写全局配置,为严格的json对象模式;

  1. pages:(页面路径)

(1)新建页面,以数组的形式填写,

(2)填写路径名会自动创建一个小程序页面,会自动生成四个文件,不需要手动创建

(3)在pages里,谁在第一项,谁就是第一个页面,文件名不需要写后缀;

(4)小程序中新增/减少页面都需要对pages数组修改;

  1. window:配置小程序的状态栏、导航条、标题、窗口背景色;(窗口表现)

常用的:

navigationBarBackgroundColor :导航栏背景色,必须16进制;

navigationBarTextStyle : 导航栏标题颜色,仅支持black/white

navigationBarTitleText : 导航栏标题文字内容

enablePullDownRefresh : 开启全局下拉刷新

backgroundColor : 下拉窗口的背景色(需要开启下拉刷新)

backgroundTextStyle: 下拉loading的样式,仅支持dark/light 小点的颜色;

  1. tabBar:导航栏,

常用选项:

color : tab文字默认颜色,仅支持16进制;

selectedColor : 文字选中时的颜色,仅支持16进制;

backgroundColor : tab背景色,仅支持16进制;

borderStyle : black/white tab上边框的颜色

list : tab列表,最少2个,最多5个;

position : bottom/top tab的位置

list为一个数组,其中的项:

pagePath : 页面路径,必须在pages有定义的

text : tab上按钮文字

iconPath : 图片路径,限制40k,不支持网络图片,建议81px*81px,当position:top时不显示icon;

selectedIconPath : 选中时图片路径;

JSON的值只能是以下几种数据格式,其他任何格式都会触发报错,例如 JavaScript 中的 undefined。 1. 数字,包含浮点数和整数 2. 字符串,需要包裹在双引号中 3. Bool值,true 或者 false 4. 数组,需要包裹在方括号中 [] 5. 对象,需要包裹在大括号中 {} 6. Null

还需要注意的是 JSON 文件中无法使用注释,试图添加注释将会引发报错。

四、页面配置

  1. 在组件里的json文件里,添加app.json的window中相同的配置项;

五、wxml模板

在小程序里面,标签名字不能使用div、p、span等,

在小程序里面使用的是view、text、button、image;

在小程序里面,也是MVVM的开发模式, 提倡把渲染和逻辑分离,不要让js直接操作dom,js只需要管理状态即可;

  1. 在使用字符串插值:,标签上使用动态属性时也需要双大括号;

  2. 修改值:this.setData({msg: 'hello'})

注意:修改值时,即使使用push方法改变原数组,也没用,不会实时更新;

六、wxss

wxss具有css大部分特性,同时wxss扩展了一些特性有

  1. 尺寸单位:

    rpx: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

    如: iPhone6 上,屏幕宽度为375px,共有750个物理像素,

    则750rpx = 375px = 750物理像素,

    1rpx = 0.5px = 1物理像素。页面不同,换算的单位也不同;

注意:在使用px时,375px会自动转换750px;

  1. 样式导入

使用@import 语句导入外联样式表

@import 'common.wxss';

七、page

组件里的js文件,都由Page({})包裹,有以下属性;

  1. data函数

第一次渲染使用的初始数据,data数据必须是字符串、数字、布尔值、对象、数组类型的;

生命周期函数

(1)onLoad(options):页面加载,只会调用一次,可以在onLoad的参数中获取打开当前页面路径中的参数

(2)onShow:页面显示,页面切入前台时触发;

(3)onReady:页面初次渲染完成,只会调用一次;

(4)onHide:页面隐藏,页面切入后台时触发;

(5)onUnload:页面卸载,离开当前页面触发;

页面一进入触发:onLoadonShowonReady;

当在tabBar中切换时,切入只会触发onShow;

  1. 页面事件处理函数

onPullDownRefresh():监听用户下拉刷新事件;需要开启下拉事件;

wx.stopPullDownRefresh(),停止当前页面下拉刷新;

onReachBottom():监听用户上拉触底事件;

onPageScroll():监听用户滑动页面事件,会实时触发;一个参数(scrollTop)

八、事件

  1. 事件分类:

bind:冒泡事件,触摸子元素会触发父元素的事件;

catch:非冒泡事件;

例:bindtap='skip'、catchtap='skip'

后面也可以紧跟一个冒号;bind:tap='skip';

注意:事件不能传参;可以通过在页面绑定id,或者通过data-,后面添加内容,在事件通过event获取;

  1. 事件

tap:触摸马上离开,类似click事件;

touchstart:手指触摸动作开始

touchmove:手指触摸后移动;

touchcancel:手指触摸动作打断,如来电提醒,弹窗;

touchend:手指触摸动作结束

  1. 监听子元素事件

给父元素绑定capture-bind:touchstart='事件名',当触摸子元素时,则会触发该事件;

Released under the MIT License.