赞
踩
微信小程序官网开发文档
微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验
第一次登录微信开发者工具是需要微信扫码登录的
选择测试账号进行小程序的开发
到此,微信小程序创建成功
获取微信小程序昵称成功!
在项目的文件目录中找到“project.config.json”这个文件,点击打开,在右侧的代码区域里面找到“appid”,直接修改值,修改成功之后,保存,appid就修改好了
页面调试成功,按ctrl+S自动保存编译,模拟器展示调试后的样式与效果
清除本地的缓存和用户数据
点击详情按钮,
结构 | 传统web | 微信小程序 |
---|---|---|
结构 | HTML | WXML |
样式 | CSS | WXSS |
逻辑 | Javascript | Javascript |
配置 | 无 | JSON |
通过对比得出,传统web是三层结构,而微信小程序是四层结构,多了一层配置.json
一个小程序应用程序会包括最基本的两种配置文件。一种是全局的app.json和页面自己的page.json
pages:——用于描述当前小程序所有页面路径,让微信客户端知道当前你的小程序页面定义在哪个目录
window:——定义小程序所有页面的顶部背景颜色,文字颜色等
{
"pages": [
"pages/index/index",//表示当前页面定义在pages/index的目录下,表示在小程序中是启动页面
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
(以下方式只在微信开发者工具中有效)
新增页面提示iPage “pages/main/main” has not been registered yet.
在main.js中输入Page,创建Page构造函数
tabbar:标签页
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
tabBar官网的介绍
tabBar和pages是同级
app.json中配置如下
{ "pages":[ "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"dark", "navigationBarBackgroundColor": "#0094ff", "navigationBarTitleText": "我的应用", "navigationBarTextStyle":"white", "enablePullDownRefresh":true, "backgroundColor":"#FFFF00" }, "tabBar":{ "list":[ { "pagePath":"pages/index/index", "iconPath":"images/icon_consult.png", "text":"首页" }, { "pagePath":"pages/test/test", "iconPath":"images/icon_invest.png", "text":"项目管理" } ] }, "style": "v2", "sitemapLocation": "sitemap.json" }
效果如下:
页面配置中只能设置 app.json 中 window 对应的配置项,以决定本页面的窗口表现,所以无需写 window 这个属性
修改导航栏标题navigationBarTitleText
效果如下:
text标签
在页面.js文件Page函数的data属性里面定义属性和属性值
Page({ // 页面中显示的数据 data:{ msg:'Hello WiXIN', num:1000, flag:true, person:{ age:73, height:145, weight:160, name:'富婆' }, isChecked:true } })
在页面中使用{{属性名}}获取属性值
<!--pages/main/main.wxml--> <!-- 字符串 --> <view>{{msg}}</view> <!-- 数字类型 --> <view>{{num+1}}</view> <!-- boolean类型 --> <view>{{flag}}</view> <!-- 对象类型 --> <view>{{person.name}}</view> <view>{{person.height}}</view> <view>{{person.weight}}</view> <view>{{person.age}}</view> <!-- 在标签的属性中使用 --> <view data-num="{{person.age}}">12</view> <!-- 使用boolean类型充当属性,checked. 字符串和花括号之间一定不要存在空格,否则会导致识别失败 以下的写法就是错误的示范 <checkbox checked=" {{isChecked}}"></checkbox> 无论isChecked是true和false都是显示为选中的状态 --> <view> <checkbox checked="{{isChecked}}"></checkbox> </view>
Page({
data:{
msg:'Hello'
}
})
<view> <view>{{msg}}</view> <!-- 运算=>表达式 1.可以在花括号中加入表达式 -- "语句" 2.表达式 指的是一些简单、运算、数字运算、字符串、拼接、逻辑运算 2.1数字的加减 2.2字符串拼接 2.3三元表达式 3.语句 3.1复杂的代码段 3.2 if else 3.3 switch 3.4 do while 3.5 for --> <view>{{1+1}}</view> <view>{{'1'+'1'}}</view> <view>{{11%2==0?'偶数':'奇数'}}</view> </view>
官网介绍
wx:for
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
修改如下:
控制台警告消除
完整代码:
<view> <!-- 列表渲染 wx:for="{{数组或者对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引" wx:key="唯一的值"用来提高列表渲染的性能 wx:key 绑定一个普通的字符串的时候,那么这个字符串名称,肯定是循环数组中的对象的唯一属性 wx:key="*this" 表示你的数组是一个普通的数组,*this表示是循环项 [1,2,3] --> <!-- 如不提供 wx:key,会报一个 warning --> <!-- --> <view wx:for="{{list}}" wx:for-item="a" wx:for-index="i" wx:key="i"> 索引:{{i}}--值{{a.name}} </view> </view>
Page({ data:{ list:[ { id:0, name:'猪八戒' }, { id:1, name:'沙和尚' }, { id:2, name:'孙悟空' } ] } })
完整代码
<view>
<!-- 对象循环
wx:for="对象" wx:for-item="对象的值" wx:for-index="对象的属性"
循环对象的时候最好把item和index的名称都修改一下
wx:for-item="value" wx:for-index="index"
-->
<view wx:for="{{person}}" wx:key="index">
属性:{{index}}——
值:{{item}}
</view>
</view>
Page({ data:{ list:[ { id:0, name:'猪八戒' }, { id:1, name:'沙和尚' }, { id:2, name:'孙悟空' } ], person:{ age:73, height:145, weight:160, name:'富婆' } } })
完整代码
<view>
<!-- block:
1.占位符的标签
2.写代码的时候,可以看到这个标签存在
3.页面渲染,小程序会把它移除掉 -->
<block>
<view>123</view>
</block>
</view>
<view> <!-- 条件渲染 1. wx:if="{{true/false}}" if,else,if else wx:if wx:elif wx:else 2 hidden 2.1在标签上直接加上属性hidden 2.2 hidden="{{true}}" 3.使用场景 3.1在标签不是频繁的切换显示,优先使用 wx:if 直接把标签从页面结构给移除掉 3.2在标签频繁的切换显示的时候,优先使用hidden 通过添加样式的方式来切换显示 hidden属性不要和样式display一起使用 --> <view>条件渲染</view> <view wx:if="{{true}}">123</view> <view>隐藏</view> <view wx:if="{{false}}">123</view> <view>if和else if 和else</view> <view wx:if="{{true}}">1</view> <view wx:elif="{{false}}">2</view> <view wx:else>3</view> <view hidden style="display:none">hidden隐藏</view> <view hidden="{{false}}">hidden属性</view> <view hidden style="display:flex">hidden属性和display一块使用后的结果</view> </view>
效果如下
小程序中绑定事件,通过bind关键字来实现。如bindtap、bindinput、bindchange等
不同的组件支持不同的事件,具体看**组件**的说明即可
<!--
1.需要给input标签绑定input事件
绑定关键字bindinput
2.获取输入框的值,通过事件源对象来获取
e.detail.value获取输入框的值
3.把输入框的值赋值到data当中,不能直接this.data.num=e.detail.value
正确的写法:
this.setData({
num:e.detail.value
})
-->
<input type="text" bindinput="handleInput"/>
<view>{{num}}</view>
Page({
data:{
num:0
},
//输入框的Input事件的执行逻辑
handleInput(e){
this.setData({
num:e.detail.value
});
}
})
<!--
点击事件bindtap
无法在小程序当中的事件中直接传参
通过自定义属性的方式来传递参数
-->
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>
Page({
data:{
num:0
},
//加减按钮的事件
handletap(e){
// console.log(e);
//获取自定义属性operation
const operation=e.currentTarget.dataset.operation;
this.setData({
num:this.data.num+operation
});
}
})
页面如下:
点击+号按钮,数字增加,减号按钮,数字减1
在index.js中添加如下代码
Page({
});
在index.wxss中添加如下代码
/* 小程序中不需要主动引入样式文件 需要把页面中某些元素的单位由px改为rpx 当前的设计稿750x 750px=750rpx 1px=1rpx 屏幕宽度改为375px 375px=750rpx 1px=2rpx 1rpx=0.5px 存在一个设计稿宽度414或者未知 1设计稿 page存在一个元素宽度100px 2.拿以上的需求去实现不同宽度的页面适配 page px=750rpx 1px=750rpx/page 100px=750rpx*100/page 假设page=375px 利用一个属性calc属性 css和wxss都支持一个属性 750和rpx中间不要留空格 运算符的两边也不要留空格 */ view{ /* width: 200rpx; */ height: 200rpx; background-color: aqua; font-size: 40rpx; /* 以下代码写法是错误 */ /* width: 750rpx*100/375; */ /*正确的写法 */ width:calc(750rpx*100/375); }
在index.wxml中添加如下代码:
<view>
rpx
</view>
效果如下:
在项目的根目录下新建style文件夹,在style文件夹下面创建style.wxss
view{
color: aqua;
font-size:32rpx;
}
在项目的demo/demo的路径的文件中引入
/* 引入代码是通过@import
路径只能写相对路径
*/
@import '../../style/style.wxss';
<view>test</view>
效果如下:
小程序不支持通配符*
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nth-child(n) view:nth-child(2) // 选择某个索引的标签
由于小程序打包上线的大小限制在2M,所以很多静态资源要放在网络上,图片大小要进行限制,尽量使用网络图片。
完整代码
<!-- image图片标签
src:指定要加载的图片的路径
图片存在默认的宽度和高度320*240
原图大小为154*148
mode决定图片内容,如何和图片标签宽高做适配
1.scaleToFill:默认值,缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素.
aspectFit:保持宽高比,缩放模式,确保图片的长边能完全显示出来,页面轮播图常用
aspectFill 缩放模式,保持纵横比缩放图片,保证图片的短边能完全显示出来,少用
widthFix 以前web图片的宽度指定之后,高度会自动按比例来调整 ,常用
bottom:类似以前的web的background-position
2.小程序当中的图片直接就支持懒加载 lazy-load
lazy-load 会自己判断,当图片出现在视口上下三屏的高度之内的时候,自己开始加载图片
-->
<image src="https://ae01.alicdn.com/kf/H6fc552e2e37f481eab87ed382c435744r.jpg" mode="bottom" lazy-load/>
Page({
})
image{
box-sizing: border-box;
border: 1px solid red;
width: 300px;
height: 500px;
}
效果如下:
全部代码:
<!-- 1.轮播图外层容器swiper 2.每一个轮播项swiper-item 3.swiper标签存在默认样式 3.1 width:100% 3.2 height:150px image存在默认宽度和高度320*240 swiper高度无法实现由内容撑开 4.先找出来原图的宽度和高度,等比例给swiper定宽度和高度 原图的宽度和高度1125*352 swiper 宽度/swiper高度=原图的宽度/原图的高度 swiper 宽度=swiper高度*原图的宽度/原图的高度 height:100vw*352/1125 autoplay:自动轮播 interval:修改轮播时间 circular:衔接轮播 indicator-dots:显示面板指示点(索引器,分页器,指示器) indicator-color :指示点颜色(指示器未选择的颜色) indicator-active-color:指示点颜色(指示器选择的颜色) --> <swiper autoplay interval="3000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff9400"> <swiper-item> <image src="http://img.alicdn.com/imgextra/i2/42/O1CN01ARtwr41CBHErSCzQY_!!42-0-luban.jpg" mode="widthFix"/> </swiper-item> <swiper-item> <image src="https://aecpm.alicdn.com/tps/i4/TB1pgxYJXXXXXcAXpXXrVZt0FXX-640-200.jpg" mode="widthFix"/> </swiper-item> <swiper-item> <image src="https://img.alicdn.com/tps/i4/TB1v2mGIEH1gK0jSZSySuttlpXa.jpg" mode="widthFix"/> </swiper-item> </swiper>
/* pages/swiper/swiper.wxss */
swiper{
width: 100%;
height: calc(100vw*352/1125);
}
image{
width: 100%;
}
效果如下:
导航组件类似超链接标签a
<!-- 导航组件navigator 块级元素,默认会换行,可以直接加宽度和高度 url:要跳转的页面路径,绝对路径,相对路径 target要跳转到当前的小程序,还是其他的小程序的页面 self:默认值,自己小程序的页面 miniProgram:其他小程序的页面 open-type :跳转方式 navigate:默认值,保留当前页面,跳转到应用内的某个页面,但是不能跳转到tabbar页面 redirect:关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到tabbar页面 switchTab:跳转到tabBar页面,并关闭其他所有非tabBar页面 reLaunch:关闭所有页面,打开到应用内的某个页面 navigateBack:关闭当前页面,返回上一页面或多级页面,可通过getCurrentPages()获取当前的页面栈,决定需要返回几层 exit:推出小程序,target="miniProgram"时生效 --> <navigator url="/pages/swiper/swiper" open-type="navigate">轮播图页面</navigator> <navigator url="/pages/index/index" open-type="switchTab">直接跳转到tabbar页面</navigator> <navigator url="/pages/swiper/swiper" open-type="redirect">轮播图页面redirect</navigator> <navigator url="/pages/index/index" open-type="reLaunch">relaunch可以直接跳转到tabbar页面</navigator>
页面效果如下:
富文本
demo2.wxml中代码
<!-- rich-text富文本标签
node属性来实现
1.接收标签字符串
2.接收对象数组
-->
<rich-text class="text" nodes="{{html}}"></rich-text>
demo2.js中代码
// pages/demo2/demo2.js
Page({
data:{
html:'<div style="color:hotpink;font-size:32px;font-weight:700;">123</div>'
}
})
页面效果:
Page({ data:{ html:[ { //div标签 由name属性来指定 name:"div", //标签上的属性 class style attrs:{ class:"my_div", style:"color:red;" }, //子节点children 要接收的数据类型和nodes第二种渲染方式的数据类型一致 children:[ { name:"p", attrs:{ }, children:[ { //放文本 type:"text", text:"hello" } ] } ] } ] } })
<!-- rich-text富文本标签
node属性来实现
1.接收标签字符串(最常用的)
2.接收对象数组
-->
<rich-text nodes="{{html}}"></rich-text>
效果如下:
<!-- button标签
外观的属性
size:控制按钮的大小,默认值是default,mini 小尺寸
type:控制按钮的颜色,default:灰色,primary:绿色,warn:红色
plain:按钮是否镂空,背景色透明
loading:名称前是否带 loading 图标
-->
<button>默认按钮</button>
<button size="mini">mini默认按钮</button>
<button type="primary">primary按钮</button>
<button type="warn">warn按钮</button>
<button type="warn" plain>plain按钮</button>
<button type="primary" loading>loading按钮</button>
<!-- button开放能力,open-type 的合法值 --> <!-- contact 直接打开 客服对话功能,需要在微信小程序的后台配置 share 转发当前的小程序到微信朋友中,不能把小程序分享到朋友圈中 getPhoneNumber 获取当前用户的手机号码信息,结合一个事件来使用,不是企业的小程序账号,没有权限来获取用户的手机号码,绑定一个事件bindgetphonenumber,在事件回调函数中通过参数来获取信息,获取到的信息,已经加密过了,需要用户自己搭建小程序的后台服务器,在后台服务器中进行解析手机号码,返回到小程序中就可以看到信息了 getUserInfo 获取用户的个人信息,使用方法类似获取用户的手机号码,可以直接获取不存在加密的字段 launchApp 在小程序当中直接打开app,需要先在app中通过app的某个链接打开小程序,在小程序中再通过这个功能重新打开app。 openSetting 打开小程序内置的授权页面,授权页面只会出现用户曾经点击过的授权 feedback 打开小程序内置的意见反馈页面,只能通过真机调试来打开--> <button open-type="contact">打开客服会话</button> <button open-type="share">share</button> <button open-type="getPhoneNumber" bindgetphonenumber="bindgetphonenumber">getPhoneNumber</button> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button> <button open-type="launchApp">launchApp</button> <button open-type="openSetting">openSetting</button> <button open-type="feedback">feedback</button>
// pages/demo3/demo3.js
Page({
//获取用户的手机号码信息
bindgetphonenumber(e) {
console.log(e);
},
//获取用户个人信息
getUserInfo(e){
console.log(e);
}
})
效果如下:
<!--pages/demo/demo.wxml--> <!-- 小程序中的字体图标 type图标的类型 success|success_no_circle|info|warn|waiting|cancel|download|search|clear size 大小 color 图标的颜色 --> <icon type="success" size="23" color="hotpink"></icon> <icon type="success_no_circle" size="23" color="hotpink"></icon> <icon type="info" size="23" color="hotpink"></icon> <icon type="warn" size="23" color="hotpink"></icon> <icon type="waiting" size="23" color="hotpink"></icon> <icon type="cancel" size="23" color="hotpink"></icon> <icon type="download" size="23" color="hotpink"></icon> <icon type="search" size="23" color="hotpink"></icon> <icon type="clear" size="23" color="hotpink"></icon>
显示如下
代码如下:
Page({
data: {
gender: ''
},
check(e) {
//获取单选框中的值
let gender = e.detail.value;
//把值赋值给data中的数据
this.setData({
// gender: gender
gender
});
}
})
<!-- radio单选框
1.radio标签必须要和父元素radio-group来使用
2.value选中的复选框的值
3.需要给radio-group绑定change事件
4.需要在页面中显示选中的值
bindchange绑定radio选中事件
color:radio选中的单选按钮颜色
-->
<radio-group bindchange="check">
<radio value="男" color="red">男</radio>
<radio value="女">女</radio>
</radio-group>
<view>您选中的是{{gender}}</view>
<view>
<checkbox-group bindchange="handleChange">
<checkbox wx:for="{{list}}" wx:key="id" value="{{item.value}}">{{item.name}}</checkbox>
</checkbox-group>
<text>选中的水果:{{checkedList}}</text>
</view>
// pages/demo5/demo5.js
Page({
data:{
list:[
{
id:0,
name:"声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/80345
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。