原生小程序如何搭建发布

SunnyY
311 阅读5分钟

2021.07.28

好久没有开发小程序了，小程序的api内容也改了较多，所以抽时间专门来阅读并分享

developers.weixin.qq.com/miniprogram…

注册小程序

mp.weixin.qq.com/

新建/导入小程序

了解开发者工具的一些内容

详情：

  • 基本信息
  • 本地设置
  • 项目配置

注意点：

  1. xx接口不在合法域名列表中

项目开发中需要请求接口，接口域名需要是合法域名，否则会报以下错误信息：

此时需要登陆小程序后台管理系统--开发--开发管理--开发设置中添加服务器域名

mp.weixin.qq.com/wxamp/devpr…

在小程序中打开关联公众号的图文消息时，此时需要配置业务域名，

mp.weixin.qq.com/wxamp/devpr…

在没有权限添加服务域名，或者是对接的接口是本地开发时，此时可以在本地设置中，勾选中以下内容：

  1. 设置线上最低基础库

设置-基本设置-功能设置-基础库最低版本设置

开发小程序

常用和已经更新的API

结构分析

配置

developers.weixin.qq.com/miniprogram…

app.json 全局配置

index.json 页面配置

生命周期

App 注册小程序，必须在app .js中调用:developers.weixin.qq.com/miniprogram…

Page 注册小程序的一个页面，必须在index .js中调用:developers.weixin.qq.com/miniprogram…

WXML语法

developers.weixin.qq.com/miniprogram…

和vue类似的的语法，但也不是全相同。

小程序运行机制

developers.weixin.qq.com/miniprogram…

冷启动、热启动

小程序登录

先了解两个概念：

unionId和openId

unionId

如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 UnionID 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。

openId

同一个应用（App、公众号、小程序）的同一个用户有唯一的openid

如何获取 unionId和openId？

wx.login和wx.request

调用接口获取登陆凭证code，通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台帐号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台帐号）及本次登录的会话密钥（session_key）等。

可以理解为静默授权。

// 登录
wx.login({
  success: res => {
    // 发送 res.code 到后台换取 openId, sessionKey, unionId
    console.log(res,'res');
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://example.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

获取用户信息:wx.getUserProfile

小程序登录、用户信息相关接口调整说明

<view class="userinfo">
  <block wx:if="{{canIUseOpenData}}">
    <view class="userinfo-avatar" bindtap="bindViewTap">
      <open-data type="userAvatarUrl"></open-data>
    </view>
    <open-data type="userNickName"></open-data>
  </block>
  <block wx:elif="{{!hasUserInfo}}">
    <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
    <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <view wx:else> 请使用1.4.4及以上版本基础库 </view>
  </block>
  <block wx:else>
    <text>
      获取到用户信息
    </text>
    <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}{{11}}</text>
    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
    <text bind:tap="showBox">showmodal</text>
    <text bind:tap="showPromiseBox">showPromiseBox</text>
  </block>
</view>


Page({
	data: {
		loading:true,
		motto: 'Hello World',
		userInfo: {},
		hasUserInfo: false,
		canIUse: wx.canIUse('button.open-type.getUserInfo'),
		canIUseGetUserProfile: false,
		canIUseOpenData:false
		//canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') 
		// 如需尝试获取用户信息可改为false
	},
	onLoad() {
		console.log('page-onLoad');
		const {canIUseOpenData,hasUserInfo,canIUse} = this.data
		let info = wx.getStorageSync('userInfo')
		if(info){
			this.setData({
				userInfo: info,
				hasUserInfo: true
			})
			console.log(this.data.userInfo);
		}else{
			if (wx.getUserProfile) {
				this.setData({
					canIUseGetUserProfile: true
				})
			}
		}
		
	},
	getUserProfile(e) {
		// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
		wx.getUserProfile({
			desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
			success: (res) => {
				console.log(res)
				wx.setStorageSync('userInfo', res.userInfo)
				this.setData({
					userInfo: res.userInfo,
					hasUserInfo: true
				})
			}
		})
	},
	getUserInfo(e) {
		// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
		console.log(e)
		this.setData({
			userInfo: e.detail.userInfo,
			hasUserInfo: true
		})
	},
	getPhoneNumber(e){
		console.log(e)
		//根据返回的参数值从后台请求接口获取用户手机号
		console.log(e.detail); //cloudID、encryptedData、iv
		
	}
})

获取用户手机号

获取微信用户绑定的手机号，需先调用wx.login接口。

因为需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用 button 组件的点击来触发。

注意：目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。

需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据， 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。


<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

developers.weixin.qq.com/miniprogram…

异步 API 返回 Promise

基础库 2.10.2 版本起，异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise，否则仍按回调方式执行，无返回值。

注意事项

  1. 部分接口如 downloadFile, request, uploadFile, connectSocket, createCamera（小游戏）本身就有返回值， 它们的 promisify 需要开发者自行封装。

  2. 当没有回调参数时，异步接口返回 promise。此时若函数调用失败进入 fail 逻辑， 会报错提示 Uncaught (in promise)，开发者可通过 catch 来进行捕获。

  3. wx.onUnhandledRejection 可以监听未处理的 Promise 拒绝事件。

代码示例

// callback 形式调用
wx.chooseImage({
  success(res) {
    console.log('res:', res)
  }
})

// promise 形式调用
wx.chooseImage().then(res => console.log('res: ', res))

npm支持

developers.weixin.qq.com/miniprogram…

1. 根目录添加package.json文件

npm init -y
//参数 -y 表示对 npm 要求提供的信息，都自动按下回车键，表示接受默认值。

{
  "name": "demo-2021",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "miniprogram-sm-crypto": "^0.3.2"
  }
}

2. 安装node_modules包

npm i miniprogram-sm-crypto --production

3. 下载miniprogram依赖

\

3.1 选中使用npm依赖

3.2 点击开发者工具中的菜单栏：工具 --> 构建 npm

3.3 等待构建

wx.showShareImageMenu

打开分享图片弹窗，可以将图片发送给朋友、收藏或下载

骨架屏

developers.weixin.qq.com/miniprogram…\

可视化编辑

developers.weixin.qq.com/miniprogram…

发布小程序

avatar
文章
阅读
粉丝