微信小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
在浏览器中输入:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html >> 选择 Windows 64
双击软件 >> 安装 >> 下一步 >> 成功完成
更新最新版本方法
app.js里 "entryPagePath":"pages/logs/logs", 为设置默认APP显示页
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "防伪码查询测试版",
"navigationBarTextStyle": "black",
"navigationStyle": "custom"
},
app.json(改顶部标题背景) >>
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#2b4b6b",
"navigationBarTitleText": "防伪码查询测试版",
"navigationBarTextStyle": "white",
"backgroundColor": "#efefef",
"onReachBottomDistance": 100
},
app.json(添加底部菜单) >>
"tabBar": {
"color": "#4C4D4E",
"selectedColor": "#BDA066",
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "images/home.png",
"selectedIconPath": "images/home-fill.png"
},
{
"text": "分类",
"pagePath": "pages/classify/classify",
"iconPath": "images/all.png",
"selectedIconPath": "images/all-fill.png"
},
{
"text": "资讯",
"pagePath": "pages/news/news",
"iconPath": "images/news.png",
"selectedIconPath": "images/news-fill.png"
}
]
},
app.wxss(定义全局样式) >>
.fanhuiback{
position: fixed;
top:62rpx;
left:15rpx;
}
app.js(定义全局变量) >>
globalData: {//定义全局变量 const app = getApp();//获取app变量 app.globalData.httpurl 使用
userInfo: null,
httpurl:"https://xiyueta.com/test/web20220813a/"
},
home/home.wxss(定义page的背景颜色) >>
page {
background-color: #FBE399;
}
home/pageDetail.wxml(界面里添加rich-text) >>
<rich-text nodes="{{cxid}}" class="ma"></rich-text>
cxid=<font style='color:red'></font>
home/home.js(加载时用GET方式调用外部程序) >>
onLoad(options) {
// const token=wx.getStorageSync("token");
// console.log("token",token);
// console.log("test",app.globalData.httpurl)
this.loadJson();
},
loadJson(){
wx.request({
url:app.globalData.httpurl+'api/home.asp',
method:'GET',
success:(res)=>{
console.log("home",res)
// console.log(res.data.foottext)
this.setData({
bg:res.data.bg
})
}
})
},
home/home.js(调用扫码) >>
clickimg1(e) {
var that = this;
console.log("home","点击");
wx.scanCode({
onlyFromCamera: true,// 只允许从相机扫码
success(res){
console.log("扫码成功:"+JSON.stringify(res))
let url=res.result;
let nLen=url.indexOf('?cxid=');
if(nLen!=-1){
url=url.substr(nLen+6);
}
console.log("show",url)
// 扫码成功后 在此处理接下来的逻辑
that.setData({
scanCode: res.result
})
//跳转
wx.navigateTo({
url: "./pageLanguage?cxid="+url
})
}
})
},
界面调用 <image src="{{bg}}" mode="widthFix" class="saomiao"></image>
跳转和接受参数 >>
//跳转
wx.navigateTo({
url: "./pageLanguage?cxid="+url
})
//接受
onLoad(options) {
this.setData({
cxid: options.cxid
})
this.loadJson();
},
page/pageInfo.wxml(隐藏图片) >>
<image src="{{img1}}" mode="widthFix" class="imgtop" hidden="{{click1On}}" bindtap='clickAct1'></image>
<image src="{{img2}}" mode="widthFix" class="imgtop" hidden="{{click1Off}}" bindtap='clickAct1'></image>
page/pageDetail.wxml(if判断) >>
<view class="t2" wx:if="{{lan!='en'}}">{{t10}}</view>
<view class="t2en" wx:if="{{lan=='en'}}">{{t10}}</view>
page/pageLanguage.js(网址跳转到小程序接受q参数) >>
onLoad(options) {
if (options.q) {
let qrUrl = decodeURIComponent(options.q)
this.setData({
cxid: this.getQueryString(qrUrl, 'cxid')
})
} else {
this.setData({
cxid: options.cxid
})
}
this.loadJson(this.data.cxid);
},
getQueryString(url, name) {
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
var r = url.substr(1).match(reg)
if (r != null) {
return r[2]
}
return null;
},
Vant 是一个轻量、可靠的移动端组件库
在浏览器中输入:https://vant-contrib.gitee.io/vant-weapp/#/home
Vant Weapp
在“微信开发者工具”里安装Vant Weapp
# 通过 npm 安装
npm i @vant/weapp -S --production
index.wxml文件
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
开发辅助 /原生支持 TypeScript
在浏览器中输入:https://developers.weixin.qq.com/miniprogram/dev/devtools/compilets.html
project.config.json 文件
"setting": {
"useCompilerPlugins": [
"sass"
],
news.scss 文件
.box{
.inner{
.text{
color:red;
font-size:50rpx;
}
}
}
在浏览器中输入:https://developers.weixin.qq.com/miniprogram/dev/component/view.html
index.wxss文件
<view class="box" hover-class="boxhover"
hover-stay-time="0"
hover-start-time="0"
>
你好
<view class="inner"
hover-stop-propagation
hover-class="innerhover"
>朋友</view>
</view>
index.wxss文件
.box{
color:red;
width:200px;
height:200px;
background:orange;
}
.boxhover{
color:white;
background: blue;
}
.box .inner{
width:80px;
height:80px;
background:pink;
}
.box .innerhover{
background:red;
color:yellow;
}
在浏览器中输入:https://developers.weixin.qq.com/miniprogram/dev/component/text.html
index.wxss文件
<view>aaaaa</view>
<view>bbbbb</view>
<text>111111</text>
<text user-select>222222</text>
<text>333333</text>
可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px
在浏览器中输入:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
可快速输入 .row{$}*6 >> 按tab键
index.wxss文件
<scroll-view class="myScroll" scroll-x>
<view class="row">1</view>
<view class="row">2</view>
<view class="row">3</view>
<view class="row">4</view>
<view class="row">5</view>
<view class="row">6</view>
<view class="row">7</view>
<view class="row">8</view>
</scroll-view>
index.wxss文件
.myScroll{
width:100%;
height:220rpx;
background: #eee;
white-space: nowrap;
}
.myScroll .row{
width:220rpx;
height:220rpx;
background: palegreen;
margin-right:10rpx;
display: inline-block;
}
/* 清除最右边空隙 */
.myScroll .row:last-child{
margin-right: 0px;
}
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
在浏览器中输入:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
index.wxss文件
<view class="banner">
<swiper
previous-margin="30rpx"
circular
autoplay
interval="3000"
indicator-dots
indicator-active-color="#bda066"
indicator-color="rgba(255,255,255,0.3)"
>
<swiper-item>
<view class="item"><image src="/images/banner0.jpg" ></image></view>
</swiper-item>
<swiper-item>
<view class="item"><image src="/images/banner1.jpg" ></image></view>
</swiper-item>
<swiper-item>
<view class="item"><image src="/images/banner2.jpg" ></image></view>
</swiper-item>
<swiper-item>
<view class="item"><image src="/images/banner3.jpg" ></image></view>
</swiper-item>
</swiper>
</view>
index.wxss文件
.banner{
padding-top:30rpx;
}
.banner swiper{
height:460rpx;
}
.banner swiper-item image{
width:690rpx;
height:460rpx;
border-radius:30rpx;
}
在浏览器中输入:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
index.wxss文件
<button type="primary" bindtap="clickBtn">按钮</button>
<input type="text" style="background:#eee;"/>
index.js文件
clickBtn(){
wx.showToast({
title:"发布成功",
mask:true
})
},
在浏览器中输入:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html
index.wxss文件
<button type="primary" bindtap="clickBtn">按钮</button>
<input type="text" style="background:#eee;"/>
index.js文件
clickBtn(){
wx.showModal({
title:"是否删除",
// content:"删除之后不可恢复,请谨慎删除",
// showCancel:false
cancelText:"我要取消",
cancelColor:"#FF0000",
editable:true,
placeholderText:"请输入...",
success:res=>{
console.log(res)
}
})
},
wx.showLoading 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
在浏览器中输入:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html
index.js文件
//监听页面加载
onLoad(options){
wx.showLoading({
title:"加载中...",
mask:true
})
setTimeout(()=>{
wx.hideLoading()
},2000)
},
wx.setNavigationBarTitle显示 动态设置当前页面的标题
在浏览器中输入:https://developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.setNavigationBarTitle.html
index.json文件
{
"usingComponents": {},
"navigationBarTitleText": "api学习"
}
index.js文件
//监听页面加载
onLoad(options){
wx.setNavigationBarTitle({
title:'onload中修改的标题'
})
wx.setNavigationBarColor({
frontColor:'#000000',
backgroundColor:'#eeeeee'
})
},
wx.navigateTo 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
在浏览器中输入:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
index.wxml文件 reLaunch为能带参数的跳转方式
<navigator url="/pages/logs/logs?id=111" open-type="reLaunch">
go to logs 22
</navigator>
.js里实现跳转
index.wxml文件
<view
bind:tap="goLogs"
style="width:100rpx;height:100rpx;background: #EEE8AA;"
>
<view>
<text>go to logs</text>
</view>
<view></view>
</view>
index.js文件
goLogs(){
wx.redirectTo({
url:'/pages/logs/logs'
})
},
wx.request 发起 HTTPS 网络请求。使用前请注意阅读相关说明。
在浏览器中输入:https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
index.wxml 文件
<view class="out">
<view class="box" wx:for="{{listArr}}" wx:key='id'>
<view class="pic">
<image src="{{item.imgUrl}}" mode=""/>
</view>
<view class="name">
姓名:{{item.title}}
</view>
</view>
</view>
index。wxss 文件
.out{
padding:30rpx;
}
.out .box{
width:100%;
height:500rpx;
border:1px solid #eee;
margin-bottom: 30rpx;
}
.out .box .pic{
width:100%;height:400rpx;
}
.out .box .pic image{
width:100%;
height:100%;
}
.out .box .name{
text-align: center;
line-height: 100rpx;
}
index.js 文件
//监听页面加载
onLoad(options){
this.getData();
},
getData(){
wx.showLoading({
title: '加载中...',
mask:true
})
wx.request({
url:'https://api.thecatapi.com/v1/images/search?limit=2',
success:(res)=>{
console.log(res);
this.setData({
listArr:res.data
})
wx.stopPullDownRefresh();//停止当前页面下拉刷新。
},
complete:(err)=>{//调用成功、失败都会执行
wx.hideLoading()
}
})
},
//监听用户下拉动作
onPullDownRefresh() {
this.setData({
listArr:[]
})
this.getData();
},
wx.request 第2个案例,加了下拉刷新
onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离,单位为px。
wx.showNavigationBarLoading 显示导航条加载动画,wx.hideNavigationBarLoading 隐藏导航条加载动画
index.wxml 文件
<view class="out">
<view class="box" wx:for="{{listArr}}" wx:key='id'>
<view class="pic">
<image src="{{item.imgUrl}}" mode=""/>
</view>
<view class="name">
姓名:{{item.title}}
</view>
</view>
</view>
index。wxss 文件
.out{
padding:30rpx;
}
.out .box{
width:100%;
height:500rpx;
border:1px solid #eee;
margin-bottom: 30rpx;
}
.out .box .pic{
width:100%;height:400rpx;
}
.out .box .pic image{
width:100%;
height:100%;
}
.out .box .name{
text-align: center;
line-height: 100rpx;
}
index.js 文件
//监听页面加载
onLoad(options){
wx.showLoading({
title: '加载中...',
mask:true
})
this.getData();
},
getData(){
wx.request({
url:'https://api.thecatapi.com/v1/images/search?limit=2',
success:(res)=>{
console.log(res);
let oldData=this.data.listArr;
let newData=oldData.concat(res.data);
console.log("newData",newData)
this.setData({
listArr:newData
})
wx.stopPullDownRefresh();//停止当前页面下拉刷新。
},
complete:(err)=>{//调用成功、失败都会执行
wx.hideLoading()
wx.hideNavigationBarLoading();//隐藏导航条加载动画
}
})
},
//监听用户下拉动作
onPullDownRefresh() {
wx.showLoading({
title: '加载中...',
mask:true
})
this.setData({
listArr:[]
})
this.getData();
},
//上拉触底事件
onReachBottom() {
wx.showNavigationBarLoading();
this.getData();
},
index.json 文件 开启下拉功能 enablePullDownRefresh
{
"usingComponents": {},
"navigationBarTitleText": "api学习2",
"enablePullDownRefresh": true,
"backgroundColor": "#00804D",
"backgroundTextStyle":"light",
"onReachBottomDistance":200
}
wx.request 页面交互添加标题
api3.wxml 文件
<view class="out">
<view class="form">
<input model:value="{{iptVal}}" type="text"
placeholder="请输入用户名"
bindconfirm="onSubmit" />
</view>
<view class="row" wx:for="{{listArr}}" wx:key="i">
<view class="username">
标题5:{{item.title}}
</view>
<view class="time">时间:{{item.createtime}}</view>
</view>
</view>
api3.wxss 文件
.out{
padding:30rpx;
}
.out .row{
padding:15rpx;
border-bottom:1px solid #ccc;
}
api3.js 文件
data: {
iptVal:"",
listArr:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getData()
},
getData(){
wx.request({
url: 'http://xiyueta/api/json/test.asp',
method:"POST",
header:{"Content-Type":"application/json"},
data:{
num:4
},
success:(res)=>{
console.log(res.data.data)
this.setData({
listArr:res.data.data
})
}
})
},
onSubmit(){
console.log(this.data.iptVal)
wx.request({
url: 'http://xiyueta/api/json/test.asp?act=add',
method:"POST",
header:{"Content-Type":"application/json"},
data:{
title:this.data.iptVal
},
success:(res)=>{
console.log(res)
if(res.data.status=="y"){
wx.showToast({
title: res.data.info,
})
this.getData();//刷新
}else{
wx.showToast({
title: res.data.info,
icon:"error"
})
}
}
})
},
在浏览器中输入:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html
MyHeader.wxml 文件
<view class="header">
<view class="big">
头部大标题
</view>
<view class="small">
xiyueta小程序开发 {{name}}
</view>
</view>
MyHeader.wxss 文件
.header{
text-align: center;
padding:30rpx;
}
.header .big{
font-size:50rpx;
}
.header .small{
font-size:38rpx;
margin-top: 20rpx;
color:#666666;
}
MyHeader.js 文件
//组件的属性列表
properties: {
name:{
type:String,
value:"........"
}
},
api4.json
{
"usingComponents": {
"MyHeader":"/components/MyHeader/MyHeader"
}
}
api4.wxml 文件
<MyHeader name="作者:xx"></MyHeader>
app.wxss 文件里定义css变量名,在页面里引用这么定义好的颜色对应的变量名代码:
app.wxss 文件
view,text{
box-sizing:border-box;
}
page {
--themeColor: #bda066;
--globalColor: #1a1b1c;
--focusColor: #4c4d4e;
--descColor: #7e8081;
--greyColor: #8e8e8e;
--subColor: #b1b2b3;
--lightColor: #e4e4e4;
--globalBgColor1: #e3e4e5;
--globalBgColor2: #f6f7f8;
--globalBgColor3: #ffffff;
}
index.wxml 文件
<text class="box">内容</text>
index.wxss 文件
.box{
color:var(--themeColor);
}
一个完整案例,在app.js里输入 App >> 然后选择弹出里的 App选项 >> 自动生成代码
App({
/**
* 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
*/
onLaunch: function () {
},
/**
* 当小程序启动,或从后台进入前台显示,会触发 onShow
*/
onShow: function (options) {
},
/**
* 当小程序从前台进入后台,会触发 onHide
*/
onHide: function () {
},
/**
* 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
*/
onError: function (msg) {
}
})
在index.js里输入 Page >> 然后选择弹出的 Page选项 >>自动生成代码
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
下载工具:https://github.com/biggerstar/wedecode
第一步:cmd >> git clone https://github.com/biggerstar/wedecode.git
第二种:cmd >> wedecode >> 拖文件到 >> 回车
双击桌面微信 >> 左边更多 >> 设置 >> 文件夹管理 >> 打开文件夹 >> Applet
C:\Users\xiaoyun\Documents\WeChat Files\Applet
双击软件 >> wedecode\decryption-tool\UnpackMiniApp.exe >> 选择微信下的小程序
cmd >> wedecode >> 拖文件到 >> 回车