My first wechat app

小程序目录

My first wechat app
- 一、微信小程序
- - 1.1 微信小程序历史
  - 1.2 环境准备
  - - 1.2.1 注册账号
    - 1.2.2 获取APPID
    - 1.2.3 微信开发者工具下载地址
    - 1.2.4 创建项目
    - 1.2.5 微信开发者工具介绍
- 二、小程序结构
- - 2.1 文件结构和web结构对比
  - - 2.1.1 小程序基本配置目录
    - - 2.1.1.1 新建页面
      - 2.1.1.2 window字段介绍
      - 2.1.1.3 tabBar字段介绍
    - 2.1.2 页面配置
    - 2.1.3 小程序配置文件
    - - 2.1.3.1 sitemap配置(了解)
  - 三、模板语法
  - - 3.1数据绑定
    - 3.2 运算
    - - 3.2.1 运算符
    - 3.3 列表渲染
    - - 3.3.1 wx:for
      - 3.3.2 block
    - 3.4 条件渲染
    - 4.1 小程序事件的绑定

一、微信小程序

1.1 微信小程序历史

2016年1月11日，微信之父张小龙时隔多年的公开亮相，解读了微信的四大价值观。张小龙指出，越来越多产品通过公众号来做，因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫「微信小程序」需要注意的是，之前是叫做应用号
2016年9月21日，微信小程序正式开启内测。在微信生态下，触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案，提供小程序在云端服务器的技术方案。
2017年1月9日，微信推出的"小程序"正式上线。“小程序"是一种无需安装，即可使用的手机应用”。不需要像往常一样下载App，用户在微信中"用完即走”。

1.2 环境准备

1.2.1 注册账号

https://mp.weixin.qq.com/

1.2.2 获取APPID

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XdhpZTKQ-1609125711566)(C:\Users\20140\Desktop\QQ截图20201228104632.png)]

1.2.3 微信开发者工具下载地址

下载地址

1.2.4 创建项目

1.2.5 微信开发者工具介绍

二、小程序结构

小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。

小程序框架提供了自己的视图层描述语言 wxNL和wxss，以及lavaScript，并在视图层与逻扣层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

2.1 文件结构和web结构对比

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	JavaScript	JavaScript
配置	无	JSON

2.1.1 小程序基本配置目录

pages 字段——用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录.
window字段——定义小程序所有页面的顶部背景颜色，文字颜色定义等。

2.1.1.1 新建页面

在app.json中找到pages新增页面即可

可调整顺序 保存之后即可新建页面

2.1.1.2 window字段介绍

"backgroundTextStyle":"dark"    --下拉刷新小圆点颜色 只支持light和dark
"navigationBarBackgroundColor": "#0094FF",  --设置导航栏颜色
"navigationBarTitleText": "我的应用",   --设置导航栏简介
"navigationBarTextStyle":"white"     --设置导航栏文字颜色（只支持黑白）
"enablePullDownRefresh": true    --刷新功能 默认为false
"backgroundColor": "#eee"           --下拉刷新框的背景色

2.1.1.3 tabBar字段介绍

简记：底部导航

"pagePath": "pagePath",    --页面路径（要跳转的页面）
"text": "text",             --标题 底部导航的字
"iconPath": "iconPath",     --未选中状态的图标
"selectedIconPath": "selectedIconPath"      --选中状态的图标

与“list"同级的常用属性

"color": "#0094ff",    --未选中字体颜色
"selectedColor": "#ff9400",    --选中字体颜色  只支持16进制颜色
"backgroundColor": "#ff5533",    --背景颜色
"position": "top"   --导航在上还是在下 如果在上 图标不展示

2.1.2 页面配置

作用：

能够修改页面导航栏外观
能够修改自定义属性
修改上拉下拉菜单外观属性

页面配置很简单：

只需要吧需要的属性从window字段中复制到你需要修改的文件夹下的json文件中即可

2.1.3 小程序配置文件

2.1.3.1 sitemap配置(了解)

小程序根目录下的sitemap. json文件用于配置小程序及其页面是否允许被微信索引.

三、模板语法

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

3.1数据绑定

<!--1 text相当于之前的span标签2 view 相当于之前的div标签3 checkbox就是以前的复选框
-->
<text>hello world</text>
<view>我是demo3</view>

代码示例：

Page({/*** 页面的初始数据*/data: {msg: "hello world",number: 999,isgirl: false,person: {age: 18,name: '崔云飞',height: 180},ischecked:true},
})

<!-- 1 字符串 -->
<view> {{msg}} </view>
<!-- 2 数字类型 -->
<view> {{number}} </view>
<!-- 3 布尔类型 -->
<view>{{isgirl}}</view>
<!-- 4 对象类型 -->
<text>{{person.name}}</text>
<text>{{person.age}}</text>
<text>{{person.height}}</text>
<!-- 5 在标签的属性中使用 -->
<view data-number="{{number}}">自定义属性</view>
<!-- 6 使用布尔类型充当属性 checked 字符串和花括号之间一定不要加空格 否则会导致识别失败
-->
<view><checkbox checked="{{ischecked}}"></checkbox>
</view>

3.2 运算

3.2.1 运算符

<!-- 7 运算 => 表达式1 可以在花括号中加入一些表达式2 表达式指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算1 数字的加减2 字符串拼接3 三元表达式3 语句1 复杂的代码段2 switch3 do while4 for--><view>{{1+1}}</view><view>{{'1'+'1'}}</view><view>{{11%2==0 ? '偶数' : '奇数'}}</view>

3.3 列表渲染

3.3.1 wx:for

<!-- 8 列表循环1 wx:for="{{数组或者对象}}"  wx:for-item="循环项的名称"  wx:for-index="循环项的索引"2 wx:key="唯一的值" 用来提高列表渲染的性能1 wx:key 绑定一个蒲婷的字符串的时候 那么这个字符串名称 肯定是 循环数组中的 对象的 唯一属性2 wx:key ="*this" 就表示 你的数组 是一个普通数组 *this 表示是 循环箱[1,2,3,4,5]["1","23","aseff"]3 当出现 数组的嵌套循环 尤其要注意 以下绑定的名称 不要重名wx:for-item="item" wx:for-index="index"4 默认情况下 不写wx:for-item="item" wx:for-index="index"小程序也会把 循环项的名称和索引的名称 item 和index只有一层循环的话 (wx:for-item="item" wx:for-index="index") 可以省略9 对象循环1 wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"为了方便记忆 以及语义化2 wx:for-item="value" wx:for-index="key"-->

例子：

<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index"  wx:key="id">索引：{{index}} -- 值{{item.name}},{{item.age}}</view>
-------分割线-------<view wx:for="{{list}}" wx:key="id">索引：{{index}} -- 值{{item.name}},{{item.age}}</view>-------------分割线-------<view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age">键:{{key}} -- 值：{{value}}</view>

我们可以看到：

3.3.2 block

渲染一个包含多节点的结构块block最终不会变成真正的dom元素

作用：

1 占位符标签

2 写代码的时候可以看到标签存在

3 页面渲染时小程序会把他移除

示例：

3.4 条件渲染

<!-- 11 条件渲染1 wx:if="{{true/false}}"1 if elif elsewx:if wx:elif wx:else2 hidden 隐藏1 在标签上直接加入属性hidden2 hidden="{{true}}"3 什么场景下用哪个1 当标签不频繁切换显示 使用 wx:if直接删除标签2 当标签频繁切换显示 使用 hidden通过添加样式的方式切换不能和display一起使用-->

代码示例：

<view><view>----------条件渲染----------</view><view wx:if="{{true}}">显示</view><view wx:if="{{false}}">隐藏</view><view wx:if="{{false}}">1</view><view wx:elif="{{false}}">2</view><view wx:else="{{true}}">3</view><view hidden>我会被隐藏</view><view hidden="{{false}}">我会显示</view><view hidden style="display:flex;">设置display之后会隐藏吗</view>
</view>

4.1 小程序事件的绑定

小程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange等

不同的组件支持不同的事件，具体看组件的说明即可。

<!-- 1 需要input标签绑定 input时间绑定关键字 bindinput2 如何获取 输入框的值通过事件源对象来获取通过e.detail.value3 把输入框的值 赋值给data中不能直接赋值 如： this.detail.valuethis.setData({num:e.detail.value})4 需要加入一个点击事件1 bindtap2 无法在小程序的事件中 直接传参3 需要通过自定义属性的方式 传递参数-->

代码示例：

<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}
</view>

Page({data: {num:0},// 输入框中的input输入框执行逻辑handleInput(e){// console.log(e.detail.value);this.setData({num:e.detail.value})},// 加减按钮的事件handletap(e){// console.log(e)//  获取自定义属性 operationconst operation = e.currentTarget.dataset.operation;this.setData({num:this.data.num+ operation})}
})

web前端开发之微信小程序相关推荐

Uni-app前端开发|基于微信小程序的快递运输管理系统
作者主页:编程指南针作者简介:Java领域优质创作者.CSDN博客专家 .CSDN内容合伙人.掘金特邀作者.阿里云博客专家.51CTO特邀作者.多年架构师设计经验.腾讯课堂常驻讲师主要内容:Jav ...
搭建vue前端框架或微信小程序vue框架步骤
搭建vue前端框架或微信小程序vue框架步骤 1.下载node.js 下载地址:https://nodejs.org/en/download/ 查看node.npm版本,确保环境正确 node --v ...
都2020年，开发制作微信小程序商城，需要准备什么资料？应该不会不知道吧！
微信小程序使用越来越广泛,而还未入局的对于微信小程序开发需要什么材料甚至不清楚,其实这些材料很简单.总结就是微信支付.微信小程序注册.小程序代码,下面展开说说. 小程序红利从腾讯刚发布的财报看,微信 ...
vue.js反编译_基于electron-vue开发的微信小程序反编译客户端
开源一个小程序反编译客户端咨询小程序反编译的同学比较多,虽然有开源库但是还是有同学不清楚如何去操作,所以索性做了一个客户端方便进行小程序的反编译 # 技术选型网上已经有大佬实现了C#版的反编译工具 ...
基于云开发的微信小程序：个人相册ByUestcXiye
基于云开发的微信小程序:个人相册ByUestcXiye 作业要求第一次作业第二次作业结课作业小程序开发入门开发前的准备注册微信小程序新建一个模板小程序开通云开发服务第一次作业参考资 ...
真的简单，单手用Spring Boot 开发一个微信小程序
前言嗨,大家好,现在微信使用的用户很多,作为开发人员也可以建立一个自己的微信小程序,本期与大家分享一下作者建立微信小程序的开发流程. 申请百度搜索微信公众号平台,然后扫码登录注册一个微信公 ...
开发一个微信小程序/APP一般需要多少时间，多少钱？
开发一个微信小程序/APP一般需要多少时间,多少钱? 微信小程序/APP开发的工期和费用估算需视功能需求的多少和难易程度而定,需求不明的情况下很难给出恰当评估. 在湃点网络定制平台,一对一的专业的顾问 ...
基于云开发的微信小程序实战教程（一）
基于云开发的微信小程序实战教程(一) 最近刚开发了款小程序,在开发过程中发现,基于云开发的教程资源不是很多,而且很不详细.所以边实战边总结了下云开发的简单教程,希望对你有所帮助. 本章主要内容:什么是 ...
core和node开发小程序_成都小程序开发：微信小程序开发要多少钱？
定制开发一个微信小程序要多少钱呢? 成都小程序开发需要多少钱,成都小程序定制多少钱,成都小程序开发获得报价微信小程序背靠腾讯的亿级流量,有着非常强大的线上引流功能,目前微信小程序的开发越来越火爆,选 ...
一个程序如何连接到外网_如何从头开始开发一个微信小程序
网上有很多的人在问:怎么开发一个微信小程序?今天我来给大家详细讲讲如何申请开发并部署一个微信小程序,大家看完这篇文章后就能够自己运营一个属于自己的小程序了. 现在的小程序有百度小程序,头条小程序,支付 ...

web前端开发之微信小程序

My first wechat app

小程序目录

一、微信小程序

1.1 微信小程序历史

1.2 环境准备

1.2.1 注册账号

1.2.2 获取APPID

1.2.3 微信开发者工具下载地址

1.2.4 创建项目

1.2.5 微信开发者工具介绍

二、小程序结构

2.1 文件结构和web结构对比

2.1.1 小程序基本配置目录

2.1.1.1 新建页面

2.1.1.2 window字段介绍

2.1.1.3 tabBar字段介绍

2.1.2 页面配置

2.1.3 小程序配置文件

2.1.3.1 sitemap配置(了解)

三、模板语法

3.1数据绑定

3.2 运算

3.2.1 运算符

3.3 列表渲染

3.3.1 wx:for

3.3.2 block

3.4 条件渲染

4.1 小程序事件的绑定

web前端开发之微信小程序相关推荐

最新文章

热门文章