小程序基础

Posted 2021-01-21 jooqss

 

一、准备

1. 开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。
2. 小程序的 AppID 相当于小程序平台的一个身份证。
3. 开发工具的使用　
   • 界面：模拟器（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 文字

导航

navigator 页面链接

表单

多媒体(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 属性

 

四、发布前准备和上线

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