关键词：
微信小程序学习(1):基本框架
一.了解认识微信小程序
- 在日常生活中已经习以为常的小程序拥有哪些特点呢？和手机APP应用有什么区别捏？
二.认识开发者工具和微信小程序基本框架
1.Hello World！
- 从头写,不使用模板
-
至少要有app.js 和 app.json文件
-
app.js
-
app.json
-
注册页面路径
"pages":[ "pages/helloworld/helloworld" ]
-
-
-
创建一个页面需要四个文件
-
wxml
-
wxss
-
json
-
js
四个文件需命名一致
-
-
创建helloworld页面
-
helloworld.js
-
注册页面
-
通过配置函数注册
-
中的参数为obejct类型 ，可传入生命周期，事件处理函数 ，页面默认数据等等
-
先传入空参数
-
-
-
helloworld.json
-
至少传入一个空的配置对象
-
-
helloworld.wxml
<view>Hello World!<view> -
helloworld.wxss
-
页面样式
view width: 100%; height: 40rpx; text-align: center;
-
-
-
目录
-
效果
遇到的问题，一开始就默认显示那个啥微信开发者页面，怎么刷新都不显示Hello World！
-
解决：
先点终止按钮,再刷新
-
2.架构分析
来新建一个带基础模板的页面看看
①目录结构
②主体文件
- VX小程序主体部分由
app.js、app.json、app.wxss3个文件组成，这3个文件必须放在主目录下面，且文件名称固定- app.js
- 主逻辑文件
- 不可或缺
- 用于注册小程序
- app.json
- 主配置文件
- 不可或缺
- 用于全局配置
- app.wxss
- 主样式表文件
- 可有可无
- app.js
③页面文件
- js
- 页面逻辑文件
- 不可或缺
- wxml
- 页面描述文件
- 用于设计布局、数据绑定
- 不可或缺
- wxss
- 页面样式表
- 页面也可以使用app.wxss中定义的样式
- json
- 若页面无特殊配置可省略
④其他文件
3.配置文件详解
还是以那个模板为例
主配置文件app.json
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
,
"style": "v2",
"sitemapLocation": "sitemap.json"
配置文件的内容就是一个json对象
-
pages属性
-
是个数组，每一项都是字符串
- 数组第一项是小程序初始页面(启动时运行显示的页面)
-
用来放页面的路径
-
【路径+文件名】
- 文件名不用写后缀，因为找到路径后会对js，json，wxml，wxss四个文件进行组合编译
-
-
-
window属性
- 定义窗口表现形式
- 配置窗口状态
- 如窗口背景色
backgroundColor- 与HEML中颜色设置相同
- 如下拉背景字体、loading图的样式
backgroundTextStyle- 目前只有dark 或 light，默认dark
- 如
navigationBarTitleText设置导航栏标题文字内容 - and so on…
- 如窗口背景色
-
tabBar属性
- 窗口底部切换页面的tab栏
- 是个数组
- 最少2个 最多 5个元素
-
其他配置
-
如各种网络连接API
先不记那么多啦
-
页面配置文件
- app.json是全局配置，对所有页面都适用
- 但有时候不同页面有不同需求,就需要单独配置
- 页面单独配置比app.json简单
- 在页面配置项中只能设置app.json中的window配置项的内容(页面中配置项会覆盖app.json的window中相同的配置项)，以决定本窗口的表现
4.逻辑层js文件
App函数注册小程序
-
看看那个自动生成的页面的代码
// app.js App( onLaunch() // 展示本地存储能力 const logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login( success: res => // 发送 res.code 到后台换取 openId, sessionKey, unionId ) , globalData: userInfo: null )App()函数的参数是个JSON对象，在这个对象中可以指定小程序的生命周期函数,可定义如下三种
- onLaunch
- 初始化完成会且仅会触发1次
- onShow
- 启动or从后台进入前台触发
- onHide
- 前台进入后台时触发
- onLaunch
Page函数注册页面
-
来看看那个自动生成的
index.js// index.js // 获取应用实例 const app = getApp() Page( data: motto: 'Hello World', userInfo: , hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), canIUseGetUserProfile: false, canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false , // 事件处理函数 bindViewTap() wx.navigateTo( url: '../logs/logs' ) , onLoad() if (wx.getUserProfile) this.setData( canIUseGetUserProfile: true ) , getUserProfile(e) // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 wx.getUserProfile( desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => console.log(res) 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 ) )
初始化数据
- data属性
- 初始化数据位于data属性中，会对页面进行第一次渲染
- data以JSON形式由逻辑层传到视图层
- 数据必须可以转换成JSON格式
生命周期函数
- onLoad
- 加载完调用
- onShow
- 显示时调用，每打开一次调用一次
- onReady
- 初次渲染完调用，仅调用一次
- and so on…
5.页面描述文件wxml
Weixin markup language
类XML格式文件
-
打开
index.wxml康康<!--index.wxml--> <view class="container"> <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> <image bindtap="bindViewTap" class="userinfo-avatar" src="userInfo.avatarUrl" mode="cover"></image> <text class="userinfo-nickname">userInfo.nickName</text> </block> </view> <view class="usermotto"> <text class="user-motto">motto</text> </view> </view>
组件
- 上面有点像HTML的元素及属性
- 在wxml中这些东西叫做
组件
- 在wxml中这些东西叫做
- 组件是试图的基本组成单位
- 上面有
view组件image组件text组件- 组件可以设置属性
- 如
class、src
- 如
- 组件可以设置属性
数据绑定
-
像
index.wxml中可以看到有这种用双大括号包起来的有点像vue中的插值表达式
-
看到的实际内容是一个字符串而不是”motto“
-
渲染页面时，发现motto，会从
index.js的Page函数的data属性中寻找motto,找到该变量就会把变量中的值渲染到对应位置,最后出现在页面中
-
写一个测试页面
-
新建一个页面databind
- 建立databind文件夹放在pages文件夹的下面
- 建立四个文件
- 修改app.json
- 注意数组第一项是小程序初始页面(启动时运行显示的页面)，所以把
"pages/databind/databind"放到数组的第一项
- 注意数组第一项是小程序初始页面(启动时运行显示的页面)，所以把
- 建立databind文件夹放在pages文件夹的下面
-
在databind.json 设置页面标题
"navigationBarTitleText":"a test for 数据绑定" -
databind.js中添加代码:
Page( data: content:"微信小程序数据绑定内容测试", hiddencontent:"隐藏的内容", flag: false, num1 :1, num2 :2, user: name:"你叫啥名字哈哈哈", age:10000 )这里flag改成ture的话，就不会显示hiddencontent
-
databind.wxml中：
<view class="container"> <view class="content"> <!--在text组件显示content变量的内容--> <text>content</text> </view> <!--三元运算表达式,结果为true时 view组件就不会显示在页面中--> <view class="content" hidden="flag? true:false"> <text>hiddencontent</text> </view> <view class="content"> <text>num1+num2=num1+num2</text> </view> <view> <text>"hello"+user.name</text> </view> <view> <text>How old are you?</text> <text>user.age</text> </view> </view> -
databind.wxss中
.content margin:40rpx; padding:40rpx; border:2px solid #eee;container的样式已经在
app.wxss中定义过,所以这里只要content的样式就可以 -
效果
条件渲染
- 条件渲染是指根据绑定表达式的逻辑值来判断是否渲染当前组件
wx:if条件渲染
-
用于控制
比上面学的view 组件的hidden属性 更加方便
-
还可以用
wx:elif、WX:else来添加更多分支块- 当表达式为ture时渲染一个分支 false时渲染另一个分支
-
来试一试，在databind.js中添加一个属性length
-
然后在databind.wxml中添加如下代码：
-
此时页面效果
-
block wx:if条件渲染
-
上面是将
wx:if作为属性添加到一个组件中 -
而需要通过一个表达式来控制多个组件时，除了为每一个组件添加
wx:if属性外,还可以用<block>标签将多个组件包装起来，然后在<block>中添加一个wx:if即可-
js中添加condition1属性置为true
-
wxml中添加代码
<block wx:if="condition1"> <view>view1 of block</view> <view>view2 of block</view> </block>
condition1为true就会渲染，为false则2个view组件不会被渲染
-
注意
<block>仅仅是个包装元素,不是组件，不会在页面中做任何渲染,只接受控制属性
列表渲染
-
循环渲染控制
-
wx:for控制属性绑定一个数组变量
-
新建一个页面
wxfor-
app.json pages数组第一个元素换为
pages/wxfor/wxfor -
wxfor.js如下：
Page( data: users:[ name:"张三", age:18 , name:"李四", age:22 , name:"王五", age:19 ] ) -
wxfor.wxml如下:
- 注意渲染列表中，默认当前元素变量名为item，默认当前下标变量名为index
<view class="container"> <view wx:for="users" class="content"> <view>index-item.name-item.age</view> </view> </view>-
效果
-
重命名下标和变量名
-
属性中
wx:for-index="下标名字" -
属性中
wx:for-itme="变量名字" -
如上面那个例子的代码可以改为
<view class="container"> <view wx:for="users" wx:for-index="myindex" wx:for-item="myitem" class="content"> <view>myindex-myitem.name-myitem.age</view> </view> </view>
wx:for 嵌套
-
试一试九九乘法表！
<view class="container"> <view wx:for="users" wx:for-index="myindex" wx:for-item="myitem" class="content"> <view>myindex-myitem.name-myitem.age</view> </view> <view wx:for="[1,2,3,4,5,6,7,8,9]" wx:for-item="i"> <view wx:for="[1,2,3,4,5,6,7,8,9]" wx:for-item="j"> <view wx:if="i<=j"> i*j=i*j </view> </view> </view> </view> -
效果
block wx:for包装
-
下面这个和上面那段等效
<block wx:for="[1,2,3,4,5,6,7,8,9]" wx:for-item="i"> <block wx:for="[1,2,3,4,5,6,7,8,9]" wx:for-item="j"> <view wx:if="i<=j"> i*j=i*j </view> </block> </block>
使用模板
- wxml文件中,若某几个组件的组合需反复使用，则可考虑组合定义为一个模板
定义模板
是在wxml文件中定义
-
定义模板的格式
<template name="userTemp"> <view class="user"> <view>姓名: item.name</view> <view>性别: item.sex</view> <view>年龄: item.age</view> </view> </template>上面代码中，item是在调用模板时传入的一个对象 该对象的属性可在模板中绑定渲染
- 要用到
<template>标签 - 模板名称由name属性设置
- 要用到
使用模板
-
调用格式
<template is="模板名称" data="传入的数据"/>- 若模板中不需要传入数据，也可以省略data属性
模板示例
-
还是用刚刚那个
wxfor页面 -
wxml中代码
<view clas微信小程序(代码片段)
开发小程序所需的基本技能 关于小程序的介绍和使用场景这里不作介绍，这个系列的文章会一步一步地带领大家快速地学习和掌握小程序的开发。关于还没有接触过小程序的开发者来说，最关心的问题无非就是，开发小程序... 查看详情
微信小程序常用组件及基本使用详解(代码片段)
🖐本节学习目标：✅学会使用常用的组件文章目录1.常用的容器类组件的使用1.view组件的基本使用2.scroll-view组件的基本使用3.swiper和swiper-item组件的基本使用2.常用的基础内容组件的使用1.text组件的基本使用2.rich-text组件... 查看详情
微信小程序基础详解(代码片段)
介绍:昨天学习了全局配置和页面配置与目录结构,今天就开始学习模板语法之数据绑定,运算,及其列表渲染和条件渲染,当然还有比较常见的事件模板语法WXML（WeiXinMarkupLanguage）是框架设计的⼀套标签语⾔，结合基础组... 查看详情
微信小程序入门之构建一个简单todos应用(代码片段)
最近，由于工作需要开始了解微信小程序，虽然小程序已经出了很久了，刚出的那段时间很火，看到很多关于小程序的技术文章，不过现在似乎没那么火了，anyway，我们还是可以学习下的。一、了解微信小程序1.理念：小程序开... 查看详情
微信小程序学习(代码片段)
一、环境准备 1、注册一个微信小程序帐号 https://mp.weixin.qq.com/wxopen/waregister?action=step1 注册完成后申请一个AppId，前期开发也可以不申请，使用测试id，测试id一些支付等功能不能... 查看详情
小程序学习纪实1(代码片段)
小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。目录小程序前端开发实战前期工作小程序代码框架更新时间：2021年6月26日说明：写作此系列有两个目的，①复习微... 查看详情
[alpha阶段]第一次scrummeeting
...求文档，技术规格文档前端部分确定每人具体工作，学习微信小程序开发基本知识白世豪确定项目内内容，确定前后端分工及基本框架，技术规格文档概述及组织学习微信小程序前端及前后端交互知识，Alpha阶段页面跳转规划刘... 查看详情
php实现微信小程序支付(代码片段)
本文仅记录了微信小程序支付开发的基本流程和代码，具体业务需自行修改。tp5框架下演示：参考：微信小程序支付：业务流程SDK与DEMO: 下载页PHPPayDemo:demo小程序端：goPay(e) var that= this;//发起预支付，获... 查看详情
微信小程序开发总结（附源代码）(代码片段)
最近公司项目不是很忙，有时间研究研究微信小程序。参考了目前市场上各类答题类的app、小程序等等，做了一款自己的微信答题小程序，包括前端和后端，后端是用node做的。现在已经上线了，名字叫【你问我猜猜猜】，大家... 查看详情
微信小程序绘制二维码（附微信小程序开发学习手册）(代码片段)
...也希望能够给有需要的同学一些帮助。二、实现原理使用微信小程序的canvas组件进行绘制，但是在该组件用起来并不是很顺手，所以使用了第三方的框架： 查看详情
微信小程序绘制二维码（附微信小程序开发学习手册）(代码片段)
...也希望能够给有需要的同学一些帮助。二、实现原理使用微信小程序的canvas组件进行绘制，但是在该组件用起来并不是很顺手，所以使用了第三方的框架： 查看详情
微信小程序基础(代码片段)
介绍:今天我们接着微信小程序继续学习,今天学习一下样式wxss和样式导入,及其less,这里有微信小程序的全套视频,老师讲的很好感兴趣的可以去学习一下https://www.bilibili.com/video/BV1nE41117BQ?p=65&spm_id_from=pageDriver样式WXSSWXSS(Wei... 查看详情
微信小程序vantweappui框架的使用(代码片段)
1.点击下载组件库点击 下载2.引入小程序里在app.json或index.json中引入组件3.根据官方文档进行一系列的操作点击进入VantWeapp官方文档 查看详情
微信小程序文本组件text使用详解-微信小程序系统学习攻略(代码片段)
...c;在你迷茫的同时，保持本心，过好今天就好。在微信小程序中，组件text用来显示文本，基本使用代码如下：<text>测试使用</text>1基本样式设置基本使用还是比较简单的，下面咱们来论述一下文本... 查看详情
微信小程序学习动手撸一个校园网小程序(代码片段)
动手撸一个校园网微信小程序高考完毕，想必广大学子和家长们都在忙着查询各所高校的信息，刚好上手微信小程序，当练手也当为自己的学校做点宣传，便当即撸了一个校园网微信小程序。效果预览源码地址：Github??求你的小... 查看详情
微信小程序视图容器和基本内容组件(代码片段)
...牛就来带大家学习小程序的组件。我们可以将组件理解为微信内嵌的标签，它在小程序承担的作用与HTML的标签一致，不过组件的功能更加多样、具体。事不宜迟，让我们开冲！文章目录一，视图容器类组件1.1v... 查看详情
微信小程序绘制二维码（附微信小程序开发学习手册）(代码片段)
...也希望能够给有需要的同学一些帮助。二、实现原理使用微信小程序的canvas组件进行绘制，但是在该组件用起来并不是很顺手，所以使用了第三方的框架：PainterPainter的Github地址用你的方法，把这个框架下载下来&#... 查看详情
[alpha阶段]第二次scrummeeting
...已完成工作明日计划工作鲍屹伟确定每人具体工作，学习微信小程序开发基本知识学习weapp，主要学习绘制界面，demo版总体规划白世豪学习微信小程序前端及前后端交互知识，Alpha阶段页面跳转规划demo版前端页面制定，前端框架... 查看详情