weixin

1. 微信小程序简介

微信⼩程序，简称⼩程序，英⽂名 Mini Program ，是⼀种不需要下载安装即可使⽤的应⽤，它实现 了应⽤“触⼿可及”的梦想，⽤⼾扫⼀扫或搜⼀下即可打开应⽤

1.1. 为什么是微信⼩程序 ？

  1. 微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾；
  2. 推⼴app 或公众号的成本太⾼。
  3. 开发适配成本低。
  4. 容易⼩规模试错，然后快速迭代。 5. 跨平台。

1.2. 微信⼩程序历史

2016年1⽉11⽇，微信之⽗张⼩⻰时隔多年的公开亮相，解读了微信的四⼤价值观。张⼩⻰指出，越来越多产品通过公众号来做，因为这⾥开发、获取⽤⼾和传播成本更低。拆分出来的服务号并没 有提供更好的服务，所以微信内部正在研究新的形态，叫「微信⼩程序」 需要注意的是，之前是叫做 应⽤号

2016年9⽉21⽇，微信⼩程序正式开启内测。在微信⽣态下，触⼿可及、⽤完即⾛的微信⼩程序引 起⼴泛关注。腾讯云正式上线微信⼩程序解决⽅案，提供⼩程序在云端服务器的技术⽅案。

2017年1⽉9⽇，微信推出的“⼩程序”正式上线。“⼩程序”是⼀种⽆需安装，即可使⽤的⼿ 机“应⽤”。不需要像往常⼀样下载App，⽤⼾在微信中“⽤完即⾛”。

1.3. 疯狂的微信⼩程序

  1. 微信⽉活已经达到10.82亿。其中55岁以上的⽤⼾也达到6300万
  2. 信息传达数达到450亿，较去年增⻓18%;视频通话4.1亿次,增⻓100%
  3. ⼩程序覆盖超过200+⾏业，交易额增⻓超过6倍，服务1000亿+⼈次,创造出了5000亿+的商业价值!!

1.4. 还有其他的⼩程序 不容忽视

  1. ⽀付宝⼩程序
  2. 百度⼩程序
  3. QQ⼩程序
  4. 今⽇头条
  5. 抖⾳⼩程序

1.5. 体验

1.5.1. 官⽅微信⼩程序体验

2. 环境准备

开发微信⼩程序之前，必须要准备好相应的环境

2.1. 注册账号

建议使用全新的邮箱，没有注册过其他小程序或者公众号的。

访问注册⻚⾯，耐⼼完成注册即可。

注册传送门

2.2. 获取APPID

由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 APPID ，所以在注册成功后， 可登录，然后获取APPID。

登录，成功后可看到如下界⾯ 然后复制你的APPID,悄悄的保存起来，不要给别⼈看到😄。

登陆传送门

image-20210729002114285

2.3. 小程序开发者⼯具

下载地址

image-20210729002419863

微信⼩程序⾃带开发者⼯具，集 开发 预览 调试 发布 于⼀⾝的 完整环境。 但是由于编码的体验不算好，因此 建议使⽤ vs code + 微信小程序编辑工具 来实现编码 vs code 负责敲代码， 微信编辑工具 负责预览

3. 第⼀个微信⼩程序

3.1. 打开微信开发者⼯具

注意 第⼀次登录的时候 需要扫码登录

image-20210729002548648

3.2. 新建⼩程序项⽬

image-20210729002643039

3.3. 填写项⽬信息

image-20210729002721550

3.4. 成功

image-20210729002753532

4. 微信开发者⼯具介绍

官网传送门

image-20210729002944908

5. ⼩程序结构⽬录

⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服 务。

⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻 辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

5.1. ⼩程序⽂件结构和传统web对⽐

image-20210729003236279

通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序 是四层结构，多了⼀层 配置.json

5.2. 基本的项⽬⽬录

image-20210729003325677

⼩程序配置⽂件

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和 ⻚⾯⾃⼰的 page.json 注意：配置文件中不能出现注释

6.1. 全局配置app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底 部 tab 等。普通快速启动项⽬⾥边的 app.json 配置

6.1.1. window

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
 ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
 }

字段的含义

  1. pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录。
  2. window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
  3. 完整的配置信息请参考 app.json配置

6.1.2. tabbar

image-20210729004718329

6.2. ⻚⾯配置page.json

这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。 开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。 ⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚⾯中配置项会覆盖 app.json 的 window 中相同的配置项。

image-20210729004916586

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

6.3. sitemap 配置-了解即可

⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引。

7. 模板语法

WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构 建出⻚⾯的结构。

7.1. 数据绑定

7.1.1. 普通写法

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

Page({
  data: {
    message: 'Hello MINA!'
 }
})

7.1.2. 组件属性

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
 }
})

7.1.3. bool类型

不要直接写 checked=false，其计算结果是⼀个字符串

<checkbox checked="{{false}}"> </checkbox>

7.2. 运算

7.2.1. 三元运算

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

7.2.2. 算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
 }

7.2.3. 逻辑判断

<view wx:if="{{length > 5}}"> </view>

7.2.4. 字符串运算

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

Page({
  data:{
    name: 'MINA'
 }
})

⚔️注意: 花括号和引号之间如果有空格，将最终被解析成为字符串

7.3. 列表渲染

7.3.1. wx:for

项的变量名默认为 item wx:for--item 可以指定数组当前元素的变量名 下标变量名默认为 index wx:for--index 可以指定数组当前下标的变量名 wx:key ⽤来提⾼数组渲染的性能 wx:key 绑定的值 有如下选择 1. string 类型，表⽰ 循环项中的唯⼀属性 如

\2. 保留字 this ，它的意思是 item 本⾝ ，this 代表的必须是 唯⼀的字符串和数组。

posted @ 2021-07-29 01:05  Daeeman  阅读(207)  评论(0)  编辑  收藏  举报