快速开始小程序

最新推荐文章于 2023-06-28 16:08:59 发布

先知预判

最新推荐文章于 2023-06-28 16:08:59 发布

阅读量409

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/weixin_50539818/article/details/112507229

版权

小程序专栏收录该内容

8 篇文章 0 订阅

订阅专栏

小程序开发工具准备

1.申请小程序账号（appid）

https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B7

2.下载并安装微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E5%AE%89%E8%A3%85%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7
3.添加小程序信息（不使用云服务）

小程序工具介绍

1.开发工具介绍
创建pages介绍
代码区域F1显示快捷键
清缓存按钮
小程序保存自动编译
断点调试  source->js[sm]->点断点
2.小程序后台管理介绍
3.小程序文档介绍 https://developers.weixin.qq.com/miniprogram/dev/framework/

小程序发布流程

1.使用小程序账号密码，在微信公众号平台登录。
2.基本信息设置完毕后，打开微信开发工具，点击右上角【上传】功能，点击上传提示窗口中输入版本号和说明即可。
3.上传完毕后，到微信公众号后台，点击左侧菜单中的【版本管理】。
4.浏览器拉到底部，找到【开发版本】就能显示刚才提交的小程序版本，点击右侧按钮【提交审核】。注意：只有管理员才能提交
5.提交完毕后，【审核版本】中显示【审核中】，耐心等待即可，审核通过微信会有提示，后台也有消息提示，现在审核时间挺快的。
6.如果审核通过后，点击提交发布，线上版本就会显示当前提交版本，这是微信小程序中过几分钟就可以搜索到发布的小程序了。
以上就发布完小程序了，在设置中可以下载小程序二维码进行扫描登陆，或者名称搜索都可以。

小程序基本使用（常用必会）

wxml特性

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

数据绑定

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

<!--wxml-->
<view hidden=“{{flay ? true : false}}”>
	Hidden
</view>
// page.js
Page({
  data: {
    flag: false
  }
})

列表渲染

<!--wxml-->
<view wx:for="{{array}}" wx:for-item="item" wx:key="index"> {{index}}:{{item.name}} </view>
// page.js
Page({
  data: {
    array: [
		{ name: "商品A" },
		{ name: "商品B" },
		{ name: "商品C" }
	]
  }
})

条件渲染

<!--wxml-->
<view wx:if="{{view === 1}}"> 郭超1 </view>
<view wx:elif="{{view === 2}}"> 郭超2 </view>
<view wx:else> 郭超3 </view>
// page.js
Page({
  data: {
    view: Math.floor(Math.random()*3+1)
  }
})

模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板

使用 name 属性，作为模板的名字。然后在内定义代码片段，如：

<!--index1.wxml-->
<template name="staffName">
  <view>
    <view>收件人：{{name}}</view>
    <view>联系方式：{{phone}}</view>
    <view>地址：{{address}}</view>
  </view>
</template>

<!--index.wxml 引入template组件内内容-->
<import src="index1.wxml"></import> 
<!--<include src="index1.wxml"></include> 引入整体文件-->
<template is="staffName" data="{{...item}}"></template>
// index.js
Page({
  data: {
    item: {
		name: "郭超",
		phone: '15311697002',
		address: '山西'
	}
  }
})

wxss特性

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

尺寸单位rpx

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
常识：小程序的设计稿宽度一般都是750px.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VT57tHo6-1610417385572)(D:\img\1600476566151.png)]

样式导入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-96ULtGQ6-1610417385589)(D:\img\1601636067879.png)]

内联样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Rw6Z81W-1610417385595)(D:\img\1601636260881.png)]

选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IpcJaP0D-1610417385598)(D:\img\1601636426118.png)]

生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tScgp8M5-1610417385601)(D:\img\1601637186770.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jmr7FUZ1-1610417385602)(D:\img\1601637205541.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xKMBLRnK-1610417385604)(D:\img\1600511732553.png)]

路由和导航组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KdTzpSYe-1610417385606)(D:\img\1601637685387.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ngmYLYXt-1610417385608)(D:\img\1601637709246.png)]

事件流

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gjed9KZz-1610417385609)(D:\img\1601638146910.png)]

事件分类

事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：

类型	触发条件
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 设备，重按时会触发

view容器

视图容器

scroll-view混动容器

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

swiper滑块容器

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

基础内容组件

icon text rich-text progress

icon 图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
progress 进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
rich-text 富文本。
text 文本。

表单组件

button checkbox form input radio switch textarea

button 按钮。
checkbox 多选项目。
form  表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。
	 当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，		 需要在表单组件中加上 name 来作为 key。
input 输入框。该组件是原生组件，使用时请注意相关限制
radio 单选项目
switch开关选择器。
textarea多行输入框。该组件是原生组件，使用时请注意相关限制。

媒体组件

audio camera image video

audio 音频。1.6.0版本开始，该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口
camera 系统相机。扫码二维码功能，需升级微信客户端至6.7.3。需要用户授权 scope.camera。 2.10.0起    			initdone 事件返回 maxZoom，最大变焦范围，相关接口 CameraContext.setZoom。
image图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。
video 视频（v2.4.0 起支持同层渲染）。相关api：wx.createVideoContext

地图组件

map 地图（v2.7.0 起支持同层渲染）。相关api wx.createMapContext。

个性化地图能力可在小程序后台“开发-开发者工具-腾讯位置服务”申请开通，详见《微信小程序解决方案》。 小程序内地图组件应使用同一 subkey，可通过 layer-style（地图官网设置的样式 style 编号）属性选择不同的底图风格。 组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

API

网络请求

wx.request(Object object) 发起 HTTPS 网络请求

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: { x: '',y: ''},
  type: 'get'//post
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

上传下载

wx.downloadFile(Object object) 下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB。

注意：请在服务端响应的 header 中指定合理的 Content-Type 字段，以保证客户端正确处理文件类型。

wx.downloadFile({
  url: 'https://example.com/audio/123', //仅为示例，并非真实的资源
  success (res) {
    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
    if (res.statusCode === 200) {
      wx.playVoice({
        filePath: res.tempFilePath
      })
    }
  }
})

wx.uploadFile(Object object) 将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。

wx.chooseImage({
  success (res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })
  }
})

数据缓存

wx.setStorageSync(string key, any data)

参数

string key 本地缓存中指定的 key

any data 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。

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

wx.removeStorageSync(string key)

wx.removeStorage({
  key: 'key',
  success (res) {
    console.log(res)
  }
})

wx.getStorageSync(string key)

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

wx.clearStorageSync()

小程序跳转与传参

wx.switchTab(Object object)跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.redirectTo(Object object)关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

wx.navigateTo(Object object)保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

相机

CameraContext 实例，可通过 wx.createCameraContext 获取。
CameraContext 与页面内唯一的 camera 组件绑定，操作对应的 camera 组件。

登陆

wx.login(Object object)
调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。
wx.checkSession(Object object)
检查登录态是否过期。
通过 wx.login 接口获得的用户登录态拥有一定的时效性。用户越久未使用小程序，用户登录态越有可能失效。反之如果用户一直在使用小程序，则用户登录态一直保持有效。具体时效逻辑由微信维护，对开发者透明。开发者只需要调用 wx.checkSession 接口检测当前用户登录态是否有效

小程序配置

全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象
{
  "pages": [ //页面配置  第一条为首页
	"pages/storage/login",
    "pages/map/map",
    "pages/audio/audio",
    "pages/form/form",
    "pages/content/content",
    "pages/swiper/viewDemo",
    "pages/scrollView/viewDemo",
    "pages/event/event",
    "pages/route/route",
    "pages/life/life",
    "pages/index/index"
 
  ],
  "window": { //用于设置小程序的状态栏、导航条、标题、窗口背景色
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {//如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），
  //可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tab/yuedu.png",
        "selectedIconPath": "images/tab/yuedu_hl.png"
      },
      {
        "pagePath": "pages/life/life",
        "text": "生命周期",
        "iconPath": "images/tab/yuedu.png",
        "selectedIconPath": "images/tab/yuedu_hl.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"//指明 sitemap.json 的位置；默认为 'sitemap.json' 
  //即在 app.json 同级目录下名字的 sitemap.json 文件
}

页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象
{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "声明周期演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

sitemap配置

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引。
允许所有的页面被搜索到。一般不动它。

先知预判

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
快速开始小程序

小程序开发工具准备1.申请小程序账号（appid）https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B72.下载并安装微信开发者工具https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E5%AE
复制链接

扫一扫