小程序基础

2023-11-18 09:00:21

一、准备

开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。
小程序的 AppID 相当于小程序平台的一个身份证。
开发工具的使用　
- 界面：模拟器（iphone6标准）、编辑器、调试器；
- 编译：普通编译、添加编译模式（调试某个页面）、
- 详情（选择开发版本、是否验证合法域名）

二、代码构成

最简单的小程序

    ├── app.js
    ├── app.json
    ├── app.wxss
    ├── pages
    │   │── index
    │   │   ├── index.wxml
    │   │   ├── index.js
    │   │   ├── index.json
    │   │   └── index.wxss
    │   └── logs
    │       ├── logs.wxml
    │       └── logs.js
    └── utils
　　 |__project.config.json

1、JSON 配置

1.1小程序配置 app.json

　　用来对微信小程序进行全局配置
　　小程序配置 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

{
　// pages 小程序所以页面路径列表
　// window 全局的默认窗口表现
　// tabBar 底部 tab 栏的表现
  "pages": [
    "pages/welcome/welcome",
    "pages/posts/post",
    "pages/movies/movies",
    "pages/movies/movie-detail/movie-detail",
    "pages/posts/post-detail/post-detail",
    "pages/movies/more-movie/more-movie"
  ],
  "window": {
    "navigationBarBackgroundColor": "#405f80"
  },
  "tabBar": {
    "borderStyle": "white",
    "position":"bottom",
    "list": [
      {
        "pagePath": "pages/posts/post",
        "text": "阅读",
        "iconPath": "images/tab/yuedu.png",
        "selectedIconPath": "images/tab/yuedu_hl.png"
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "电影",
        "iconPath": "images/tab/dianying.png",
        "selectedIconPath": "images/tab/dianying_hl.png"
      }
    ]
  }
}

1.2 工具配置 project.config.json

　　小程序开发者工具个性化配置
　　开发者工具的配置 https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

1.3 页面配置 page.json

　　页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
　　页面配置 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE

2.WXML

　　框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

数据绑定

<view> {{message}} </view>

列表渲染　

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

条件渲染

<view wx:if="{{view == ‘WEBVIEW‘}}"> WEBVIEW </view>
<view wx:elif="{{view == ‘APP‘}}"> APP </view>
<view wx:else="{{view == ‘MINA‘}}"> MINA </view>

模板

<template name="staffName">
<view>
    FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>

事件

<view bindtap="add"> {{count}} </view>

在JS文件中声明数据和事件

Page({
    data: {
        message: ‘Hello MINA!‘,
        array: [1, 2, 3, 4, 5],
        view: ‘MINA‘,
        staffA: {firstName: ‘Hulk‘, lastName: ‘Hu‘},
        staffB: {firstName: ‘Shang‘, lastName: ‘You‘},
        staffC: {firstName: ‘Gideon‘, lastName: ‘Lin‘}
    },
    add: function(e) {
        this.setData({
                count: this.data.count + 1
        })
    }
})

3.WXSS

　　一套样式语言，用于描述 WXML 的组件样式。具有 CSS 大部分特性,对 CSS 进行了扩充以及修改。
　　app.wxss 中的样式为全局样式，被在 page 的 wxss 文件覆盖。

尺寸单位

　　rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
　　iPhone6 1rpx = 0.5px
　　iPhone6 作为视觉稿的标准。

样式导入

　　@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。（.wxss）

内联样式

　　style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />
<view class="normal_view" />

支持部分CSS选择器

.class
#id
element
element, element
::after
::before

4.JS

WXML - 事件

　　1.在组件中绑定一个事件处理函数。

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

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
Page({
    tapName: function(event) {
        console.log(event)
    }
})

　　3.冒泡事件和非冒泡事件

　　4.冒泡事件列表

touchstart
touchmove
touchend
tap
...

除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件

　　5.事件绑定和冒泡

key 以bind或catch开头
value 是一个字符串，对应 Page 中定义同名的函数。
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
事件对象
target 触发事件的源组件。
currentTarget 事件绑定的当前组件。
dataset
组件定义数据，以data-开头，多个单词由连字符-链接，event.currentTarget.dataset 中会将连字符转成驼峰elementType。
- 　　
```
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
```

小程序的API（类型）

事件监听 API

　　以 on 开头
　　接受一个回调函数作为参数

wx.onCompassChange(function (res) {
    console.log(res.direction)
})

同步 API

　　以 Sync 结尾
　　执行结果可以通过函数返回值直接获取

try {
    wx.setStorageSync(‘key‘, ‘value‘)
} catch (e) {
    console.error(e)
}

异步 API

　　大多数 API 都是异步 API
　　都接受一个 Object 类型的参数

wx.login({
    success(res) {
         console.log(res.code)
    },
    failFn,
    completeFn,
     Any
})

三、主要能力

小程序的启动

1、小程序的代码包下载到本地。

2、app.json 的 pages 字段就可以知道你当前小程序的所有页面路径，写在 pages 字段的第一个页面就是这个小程序的首页

3、app.js 定义的 App 实例的 onLaunch 回调会被执行

App()

　　App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

　　App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

onLaunch Function 生命周期回调—监听小程序初始化小程序初始化完成时（全局只触发一次）
onShow Function 生命周期回调—监听小程序显示小程序启动，或从后台进入前台显示时
onHide Function 生命周期回调—监听小程序隐藏小程序从前台进入后台时
onError Function 错误监听函数小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息
onPageNotFound Function 页面不存在监听函数小程序要打开的页面不存在时触发，会带上页面信息回调该函数

App({
  onLaunch: function(options) {
    // Do something initial when launch.
  },
  onShow: function(options) {
    // Do something when show.
  },
  onHide: function() {
    // Do something when hide.
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: ‘I am global data‘
})

全局的 getApp() 函数可以用来获取到小程序 App 实例。

程序与页面

1、logs.json 配置生成一个界面

2、装载这个页面的 WXML 结构和 WXSS 样式

3、最后装载 logs.js

Page()

　　Page 是一个页面构造器，注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

data：

　　data Object 页面的初始数据,必须是可以转成JSON的类型

生命周期回调函数：

onLoad Function 生命周期回调—监听页面加载
onShow Function 生命周期回调—监听页面显示
onReady Function 生命周期回调—监听页面初次渲染完成
onHide Function 生命周期回调—监听页面隐藏
onUnload Function 生命周期回调—监听页面卸载

面页事件处理函数：

onPullDownRefresh Function 监听用户下拉动作
onReachBottom Function 页面上拉触底事件的处理函数
onShareAppMessage Function 用户点击右上角转发
onPageScroll Function 页面滚动触发事件的处理函数
onResize Function 页面尺寸改变时触发，详见响应显示区域变化
onTabItemTap Function 当前是 tab 页时，点击 tab 时触发

组件事件处理函数

　　在渲染层的组件中加入事件绑定，当事件被触发时，就会执行 Page 中定义的事件处理函数。

setData()

　　直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。

生命周期

组件

视图容器

view 视图容器
scroll-view 可滚动视图容器
swiper 滑块视图容器

基础内容

icon 图标
text 文字

表单

多媒体(Media)

API

小程序常用API接口

网络请求

wx.request https

wx.request({
    url: ‘test.php‘, //仅为示例，并非真实的接口地址
    method:"GET",
    data: {
        x: ‘‘ ,
        y: ‘‘
    },
    header: {
        ‘content-type‘: ‘application/json‘ },
        success: function(res) {
        console.log(res.data)
    }
})

本地缓存

通过key的形式添加缓存setStorage （异步接口）

wx.setStorage({
    key:"key"
    data:"value"
})

通过key的形式获取缓存getStorage （异步接口）

wx.getStorage({
    key: ‘key‘,
    success: function(res) {
    console.log(res.data) }
})

从本地缓存中异步移除指定 key

wx.removeStorage({
    key: ‘key‘,
    success: function(res) {
    console.log(res.data)
    }
})

清理本地数据缓存

wx.clearStorage()

显示、隐藏消息提示框

wx.showToast({
    title: ‘加载中‘,
    icon: ‘loading‘,
    duration: 10000 })
    setTimeout(function(){
    wx.hideToast()
},2000)

动态设置当前页面的标题

wx.setNavigationBarTitle({
    title: ‘当前页面‘
})

保留当前页面，跳转到应用内的某个页面

wx.navigateTo({
    url: ‘test?id=1‘
})

关闭当前页面，跳转到应用内的某个页面

wx.redirectTo({
    url: ‘test?id=1‘
})

获取用户信息，需要先调用wx.login 接口

wx.getUserInfo({
    success: function(res) {
    var userInfo = res.userInfo
    var nickName = userInfo.nickName
    var avatarUrl = userInfo.avatarUrl
    var gender = userInfo.gender //性别 0：未知、1：男、2：女
    var province = userInfo.province
    var city = userInfo.city
    var country = userInfo.country
    }
})

获取系统信息（异步接口）

wx.getSystemInfo({
    success: function(res) {
        console.log(res.model)
        console.log(res.pixelRatio)
        console.log(res.windowWidth)
        console.log(res.windowHeight)
        console.log(res.language)
       console.log(res.version)
    }
})

拨打电话

wx.makePhoneCall({
    phoneNumber: ‘1340000‘ //仅为示例，并非真实的电话号码
})

获取当前的地理位置、速度

wx.getLocation({
    type: ‘wgs84‘,
    success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
    }
})

重要的 var that=this

原来我们忘记了javascript 语言中 this关键字的用法了。在javascript语言中，this代表着当前的对象，它在程序中随着执行的上下文随时会变化。在本例中回调函数对象相对于showactionsheet点击事件函数对象已经发生了变化。所以已经不是原来的页面对象了。自然就没有了data属性，也没有了data.itemLists属性了。解决的办法就是复制一份当前的对象。所以我们有了这个重要的语句：

var that=this;//把this对象复制到临时变量that.

这时候我们使用that 就不会找不到原来的对象了。

console.log(that.data.itemLists[res.tapIndex]);//使用that.data 属性

四、发布前准备和上线

团队身份管理
预览
上传
版本
提交审核
发布
运营数据

小程序基础

码农公寓

一、准备

二、代码构成

最简单的小程序

1、JSON 配置

1.1小程序配置 app.json

1.2 工具配置 project.config.json

1.3 页面配置 page.json

2.WXML

数据绑定

列表渲染

条件渲染

模板

事件

3.WXSS

尺寸单位

样式导入

内联样式

支持部分CSS选择器

4.JS

WXML - 事件

1.在组件中绑定一个事件处理函数。

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

3.冒泡事件和非冒泡事件

4.冒泡事件列表

5.事件绑定和冒泡

小程序的API（类型）

事件监听 API

同步 API

异步 API

三、主要能力

小程序的启动

App()

程序与页面

Page()

data：

生命周期回调函数：

面页事件处理函数：

组件事件处理函数

setData()

生命周期

组件

视图容器

基础内容

导航

表单

多媒体(Media)

API

网络请求

wx.request https

本地缓存

通过key的形式添加缓存setStorage （异步接口）

通过key的形式获取缓存getStorage （异步接口）

从本地缓存中异步移除指定 key

清理本地数据缓存

显示、隐藏消息提示框

动态设置当前页面的标题

导航

保留当前页面，跳转到应用内的某个页面

关闭当前页面，跳转到应用内的某个页面

获取用户信息，需要先调用wx.login 接口

获取系统信息（异步接口）

拨打电话

获取当前的地理位置、速度

重要的 var that=this

四、发布前准备和上线

相关文章

列表渲染　

　　1.在组件中绑定一个事件处理函数。

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

　　3.冒泡事件和非冒泡事件

　　4.冒泡事件列表

　　5.事件绑定和冒泡