微信小程序入门(更新中)

小程序与普通网页开发的区别

1. 网页开发渲染线程和脚本线程是一个进程。而小程序二者是分开的，分别运行在不同的线程。
2. 网页开发者可以操作DOM和BOM。小程序缺少操作DOM和BOM的方法。导致了JQ、Zepto等，在小程序中无法运行。
3. 小程序的运行环境与nodejs环境也不相同，所以一些npm包在小程序中无法运行。
   • 从小程序基础库版本2.2.1开始支持使用npm安装第三方包。

小程序开发流程

1. 注册小程序账号

   为了获取AppID，AppID就像我们的身份证一样，是唯一且很重要的，后续的所有开发流程都会基于这个AppID来完成。

   • 注册方式：
     • 直接在微信小程序的官网注册
     • 通过微信公众号注册
       • 条件是已经有微信公众号(企业级，个人不可以)
       • 有点事如果公众号已经认证过了，小程序不需要再次认证，省去了认证的时间和费用。
2. 安装开发者工具
3. 开发、测试、上传代码(上传到微信服务器)
4. 提交审核
5. 发布上线 发布小程序以后，我们才可以在微信中搜索到我们开发的小程序
6. 错误查询/性能监控 登陆官网 -> 开发 -> 运维中心

开发基础

一、语法

数据绑定

1. 内容

<view>{{title}}view>
Page({data: {message: 'hello'}
})

2. 属性(需要在双引号内)

<view id="{{id}}">view>
Page({data: {id: '001'}
})

3. 运算符

	<view hidden="{{flag ? true :  false}}"> Hidden view>

4. 其他

<view>{{"hello" + name}}view>
<view>{{name}}{{age}}view>

条件语句

1. wx:if
2. wx:elif
3. wx:else

<view wx:if="{{a > 5}}">6view>
<view wx:elif="{{a < 5}}">4view>
<view wx:else">5view>

for循环

• wx:for
• 默认数组的当前项的下表变量名默认为index，数组当前项的变量默认为item
• 使用 wx:for-item 可以指定数组当前元素的变量名
• 使用 wx:for-index 可以指定数组当前下标的变量名
• wx:for 可以嵌套
• wx:key的意思：为了额列表中遍历的每一个元素指定一个唯一的标识。当数据改变触发渲染层重新渲染的时候，确保使组件保持自身状态并提高列表渲染时的效率。

1. 如果被遍历的数组的元素是object，我们可以使用他的某一个值，这个值必须是不重复的数组或者字符串。
2. 如果被遍历的数组中的元素是数组或者字符串 *this达标在for循环中item本身。

• 举例：

假设有数据和视图分别为：

	data: {str: 'abcdefg',lesson: [{id: 0,image: './0.png',},{id: 1,image: './1.png',},{id: 2,image: './2.png',}]},

	<view wx:for="{{leeson}}" wx:key="id">注意：上面的wx:key的值为对应的属性，直接写属性的名称key即可,只要这个key是唯一标识{{item}}{{index}}view><view wx:for={{str}} wx:key="*this">注意：如果遍历的是字符串，那么可以使用*this来作为唯一标识{{item}}{{index}}view><view wx:for={{str}} wx:key="*this" wx:for-item="s" wx:for-index="n">注意：如果想更改默认每项的变量item，可以使用wx:for-item="{{s}}"，这样s就能代替item了，同理，如果想更改每项的索引index，可以使用wx:for-index="n"，这样n就能代替index了。{{s}}{{n}}view>

block组件

容器的作用，在页面渲染的时候，不会显示block标签，类似react的<>

<block>...
block>

事件、事件绑定和事件对象

事件对象可以携带额外信息，如id，dataset

• 事件

  • touchstart 手指触摸动作开始
  • touchmove 手指触摸后移动
  • touchcancel 手指触摸动作被打断，如来电提醒，弹窗
  • touchend 手指触摸动作结束
  • tap 手指触摸后马上离开
  • longpress 手指触摸后，超过350ms在离开，如果指定了时间回调函数并处罚金了这件事，tap事件将不被触发
  • longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
  • transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
    － animationstart 会在一个 WXSS animation 动画开始时触发
    － animationiteration 会在一个 WXSS animation 一次迭代结束时触发
    － animationend 会在一个 WXSS animation 动画完成时触发
    － touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发

• 事件分类

  • 冒泡事件
  • 非冒泡事件

• 事件绑定

  • 写法：key、value的形式 ，value不用写()
  • key 以 bind 或 catch开投，然后跟上事件的类型，如bindtap、catchtap

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

• 事件对象
  • type 代表事件的类型
  • timeStamp 页面打开到触发事件所经过的毫秒数
  • target 触发事件的源组件
  • currentTarget 事件绑定的当前组件

data-xxx自定义属性的大小写问题

• data－info 属性是info
• data－inFo 属性是info
• data－in－fo 属性是inFo

全局变量

• 在app.js中写的属性，在所有页面中都可以获取到

开发进阶

路由

• wx.navigateBack 返回
• wx.switchTab 跳转到tabbar的页面
• wx.navigateTo 跳转到另一个页面
• wx.reLaunch 关闭其他所有页面，只跳转到某一个页面
• wx.redirectTo 关闭当前的页面，但不允许关闭tabbar的页面

1. switchTo，不允许通过?a=1&b=2&…的形式传递参数，navigateTo可以；同时，获取参数必须在onLoad声明周期函数的options参数中获取

页面的生命周期

• onLoad 监听页面加载

• onReady 监听页面初次渲染完成

• onShow 监听页面显示

• onHide 监听页面隐藏

• onUnload 监听页面卸载

• onPullDownRefresh 监听用户下载动作

• onReachBottom 监听页面上拉触底事件

• onShareAppMessage 监听用户点击右上角分享

  • 如果没有写这个函数，那么点击右上角会显示“当前页面未设置分享”

• 特别注意：

  • 先执行onLoad，再执行onShow，再执行onReady
  • onLoad和onReady只执行一次，onShow每次都会执行。
    • 比如进入一个页面，会执行onLoad，然后onShow，然后onReady，如果这时候跳到别的页面，然后再回到这个页面，不会执行onLoad和onReady，但是会执行onShow

开发高级

一、获取用户授权(信息)

1.直接在页面展示用户信息，但不能在js获取到用户数据

• 使用open-data内置组件，type属性表示需要展示的用户信息类型，比如头像，昵称等。具体有哪些用户信息，参考文档。

	<open-data type="userAvatarUrl">open-data><open-data type="userNickName">open-data>

2.在js获取用户信息

• 微信要求button点击后才可以获取,所以需要有一个按钮，并且在按钮上绑定open-type="getUserInfo"属性和属性值，同时，通过bindgetuserinfo事件来获取用户信息

	<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">button>

	getUserInfo: (event) => {if (e.detail.errMsg === "getUserInfo:ok") {this.setData({userAvatarPic: e.detail.userInfo.avatarUrl,userNickName: e.detail.userInfo.nickName,})} else {console.log("授权失败");}}

• 当然，如果用户已经授权过，那么一开始进入页面，就可以调取接口获取到是否已经授权，如果授权，则获取用户信息。
  • 在这里，我们可以在onLoad声明周期函数中通过wx.getUserInfo调取用户信息

	Page({/*** 页面的初始数据*/data: {userAvatarPic: "",userNickName: '',},onLoad: (options) => {wx.getUserInfo({success: (res) => {this.setData({userAvatarPic: res.userInfo.avatarUrl,userNickName: res.userInfo.nickName,})}})},})

• 也可以通过wx.getSetting接口来判断是否已经授权
  • res.authSetting[‘scope.userInfo’]为true表示已经授权。

Page({onLoad: (options) => {wx.getSetting({success: (res) => {if(res.authSetting['scope.userInfo']){console.log('已经授权，可以显示用户信息');}else{console.log("尚未授权，显示授权按钮");}}})}
})

二、tabbar的配置

• 在app.json中配置tabbar

{"pages": ["pages/index/index","pages/home/home","pages/my/my"    ],"tabBar": {"color": "#7a7e83", // 未被选中时的文字颜色"selectedColor": "#e94840", // 被选中时的文字颜色"borderStyle": "black", // tabbar上边框的颜色，仅支持black/white"position": "bottom", // tabber位置，仅支持bottom/top，默认bottom，当为top时，不显示图标"backgroundColor": "#fff", // 菜单背景色"list": [{// 这个list，也就是tabbar的菜单限制为2-5个，包含2和5"pagePath": "pages/home/home","text": "首页","iconPath": "", // icon路径"selectedIconPath": "" // 选择了icon的路径},{"pagePath": "pages/my/my","text": "我的","iconPath": "","selectedIconPath": ""}]}
}

三、头部导航样式配置

• 在app.json文件中，配置一个window属性

	{"pages": ["pages/index/index","pages/home/home","pages/my/my"    ],"window": {"navigationBarBackgroundColor": "#ffffff", // 顶部导航条的背景颜色"navigationBarTextStyle": "black",// 顶部导航文字的颜色，只有black/white两种颜色"navigationBarTitleText": "无止课堂",// 顶部导航的标题"backgroundColor": "#eeeeee","backgroundTextStyle": "light","enablePullDownRefresh": false},}

• 特别注意：页面的json文件，能配置window属性，其他pages,tabbar都是不可以的,并且写window的配置时候，不用写window，直接写属性即可，例如

{"navigationBarBackgroundColor": "#ef2046","navigationBarTextStyle": "white","navigationBarTitleText": "个人中心","backgroundColor": "#eeeeee","backgroundTextStyle": "light","enablePullDownRefresh": false
}

四、网络超时设置

• 在app.json中，配置networkTimeout属性

	{"pages": ["pages/index/index","pages/home/home","pages/my/my"    ],"newtworkTimeout": { // 默认都是20s"request": 20000, // 请求超时"connectSocket": 20000, // 连接超时"uploadFile": 20000, // 文件上传超时"downloadFile": 20000 // 文件下载超时}}

五、分享和自定义分享

1. 分享

• 只需要在需要分析的页面定义一个onShareAppMessage钩子函数即可。
• 如果不写这个onShareAppMessage钩子函数，那么点击右上角会显示"当前页面未设置分享".

2. 自定义分享

• 在当前页面定义一个onShareAppMessage钩子函数，并且返回一个对象，具体如下：

	onShareAppMessage(){return {title: '自定义转发标题',path: 'page/user?id=123',imageUrl:'',}}

- title是自定义转发标题
- path是用户点击打开显示的路径地址
- imageUrl是转发显示的图片地址，如果不写，则显示页面截图

3. 引导转发(非诱导违规转发)

六、wx.request请求后台接口

• 可以通过wx.request发送请求
  • url表示请求接口
  • data表示携带的数据
  • header表示设置的请求头
  • method表示请求方式
  • dataType表示数据的类型
  • responseType表示接收返回体的数据类型
  • success表示成功的回调
  • fail表示接口自然失败的回调
  • complete表示接口完成后的调用
• 特别注意：
  • success表示成功的回调，这个成功包含后端返回的err
  • fail表示接口自然失败的回调，而非后端返回失败，比如直接404
  • 当我们在本地模拟接口的时候，可以取消合法校验，具体可以通过右上角的详情，不校验合法域名、web-view(业务域名)、TLS版本及HTTPS证书
  • 当我们每个(多个)接口都使用同一个域，那么我们可以设置一个公共域变量，一般设置方法为：
    • 在app.js中，然后在当前页面最上方使用const app = getApp(),然后，app.base_url即可获取到base_url属性
    • 或者专门设置一个存放变量的config.js，然后导出，在使用的使用导入这个变量即可

	getSwiper(){// 可以通过右上角的详情，不校验合法域名、web-view(业务域名)、TLS版本及HTTPS证书// 公共域可以有以下几种方式设置：// 1. 在app.js中，然后在当前页面最上方使用const app = getApp(),然后，app.base_url即可获取到base_url属性wx.request({url: app.base_url + '/getSliderss',data: '',header: {},method: 'GET',dataType: 'json',responseType: 'text',success: (res) => {},fail: (res) => {},//接口404这种才会走这里，如果接口调用成功，返回错误码，是走success的complete: (res) => {},// 接口完成后调用})},

七、自己封装一个http-promise

• 大部分weber其实都是喜欢使用promise的，所以，我们可以基于wx.request和promise去封装一个属于自己的http，其实非常简单，就是写一个http类而已

import {base_url} from './conifg.js';class HTTP {request({ url = '', data = {}, header = {}, method = 'GET', success = () => {}, fail = () => {}}){return new Promise((resolve, reject) => {this._request(url, data, header, method, resolve, reject);})}_request(url, data, header, method, resolve, reject){wx.request({url: base_url + url,data,header,method,success: (res) => {const data = res.data;if (data.status != undefined && data.status == 'ok'){resolve(data.data);}else{reject();// 这里可以做一些错误的逻辑}},fail: (res) => {reject();wx.showToast({title: '接口出错了',icon: 'none',duration: 30000,})},})}
}export {HTTP};

八、微信小程序与H5页面的相互跳转-webView

1. 从微信小程序跳转到H5页面(动态)

• 首先需要一个web-view组件，其实就是H5页面的容器，我们只需要跳转到该容器即可显示H5页面。
  • 设置WXML,这里的src就是h5页面的地址，当我们跳转到这个页面的时候，就会显示当前src对应地址的H5页面。当然，我们对该页面可以任意修改，因为h5页面只是显示在web-view这个容器中，有点类似iframe

  	<web-view src="{{H5URL}}">web-view>
  

  • 设置js,这里可以通过设置H5URL变量来改变h5地址，这个变量可以通过跳转的url带过来，这样可以实现动态效果

  	Page({data: {H5URL: ''},}),onLoad: function (options) {let url = decoedURIComponent(options.url);this.setData({H5URL: url})},

• 然后需要在一个页面设置跳转，跳转到web-view页面，这时候可以携带参数(实现上一步所说的动态效果)

	Page({goToH5(e){let url = e.target.dataset.url;// 伪代码wx.navigateTo({url: '/pages/webview/webview?url=' + encodeURIComponent(url)})}})

2. 从微信小程序跳转到H5页面(静态)

• 把web-view的src写死即可，在此不赘述。

3. 从H5页面跳转到微信小程序

• 首先，如果想在H5页面调用小程序提供的一些接口，就必须在H5页面中引入js
  • 具体地址可以看文档

<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

• 然后，跳转方式跟微信小程序的路由跳转类似，只是名字改变了，具体如下

九、获取用户收货地址

• 如果需要获取用户收获地址，只需要调用wx.chooseAddress()方法即可

	Page({onChooseAddr(){wx.chooseAddress({// 调用此方法即可获取用户收获地址success(res){console.log(res);// 这里就是用户收获地址信息}})}})

十、用户地理位置的选择、获取、查看和其他操作

1. 选择

• 如果需要选择用户地址位置，只需要调用wx.chooseLocation()方法即可

	Page({onChooseLocation(){wx.chooseLocation({// 调用此方法即可选择用户地理位置success(res){console.log(res);// 这里就是用户选择的地理位置信息}})}})

2. 获取

• 如果需要获取用户当前所在位置的地理位置，只需要调用wx.getLocation()方法即可

	Page({onGetLocation(){wx.getLocation({type: 'wgs84', // 默认wgs84，返回gps坐标，但是小程序使用gcj02，返回可用不wx.openLocation的坐标altitude: 'false', //默认false，传入true会返回高度信息，由于高度需要较高精确度，所以会减慢接口返回速度success: () => {},fail: () => {},complete: () => {},})}})

3. 查看

• 如果需要使用微信内置地图查看位置，只需要调用wx.openLocation()

wx.getLocation({type: 'gcj02', //返回可以用于wx.openLocation的经纬度success (res) {const latitude = res.latitudeconst longitude = res.longitudewx.openLocation({latitude,longitude,scale: 18})}
})

4. 其他操作

1. wx.stopLocationUpdate()关闭监听实时位置变化，前后台都停止消息接收

• 参考链接：wx.stopLocationUpdate

2. wx.startLocationUpdateBackground()开启小程序进入前后台时均接收位置消息，需引导用户开启授权。授权以后，小程序在运行中或进入后台均可接受位置消息变化。

• 参考链接：wx.startLocationUpdateBackground

3. wx.startLocationUpdate()开启小程序进入前台时接收位置消息

• 参考链接：wx.startLocationUpdate

4. wx.onLocationChange()监听实时地理位置变化事件，需结合 wx.startLocationUpdateBackground、wx.startLocationUpdate使用。

• 参考链接：wx.onLocationChange

5. wx.offLocationChange()取消监听实时地理位置变化事件

• 参考链接：wx.offLocationChange

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！