1.微信小程序设置Tabbar
一般设置tabbar需要在全局app.json里面配置
代码如下：
Page({
data: {
list: [{
"text": "对话",
"iconPath": "../../images/tabbar_icon_chat_default.png",
"selectedIconPath":"../../images/tabbar_icon_chat_active.png",
dot: true
},
{
"text": "设置",
"iconPath": "../../images/tabbar_icon_setting_default.png",
"selectedIconPath": "../../images/tabbar_icon_setting_active.png",
badge: 'New'
}]
},
});
Tabbar还有其他可以设置值的属性具体可以查看微信开放文档
点击进入微信小程序开放文档
2.微信小程序设置头部
设置头部需要在每个页面的json里面设置其样式
代码如下，仅供参考
{
"navigationBarTitleText": "会员中心",
"usingComponents": {
}
}
还可以设置其他的样式，可以去微信开放文档查看
3.微信小程序文件类型
微信小程序文件类型一般由4个文件组成分别为js、json、wxml、wxss
这里先简单说一下js
js一般是用于逻辑交互的，例如点击事件，获取数据等都要在js里进行
代码如下
//点击事件
GetUserInfo: function (e) {
console.log(e)
if (e.detail.userInfo) {
this.getLogin()
} else {
wx.showToast({
title: '拒绝登陆',
mask: true,
duration: 2000,
})
}
}
接下来介绍一下json
JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。
在json里面可以设置页面路径、界面表现、网络超时时间、底部 tab 等。
代码如下：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
}
}
然后就是wxml
网页编程一般采用的是html、css、和js，微信小程序里面的wxml类似于html，他是由属性、标签等组成的。但他和html里面标签并不是完全一样的比如：view、text标签
代码如下
<view class="sp">
<view wx:for="{
{bargaintwo}}" wx:for-index="index" class="spson" catchtap="toparticulars" data-id="{
{item.id}}">
<image src="{
{item.pic}}"></image>
<view class="na">{
{
item.name}}</view>
<text class="te">￥{
{
item.minPrice}}</text>
<text class="ta" wx:if="{
{item.originalPrice!=0}}">￥{
{
item.originalPrice}}</text>
</view>
</view>
最后就是wxss
看过上面的小伙伴相信可以猜出他是做什么的，对！没错。他类似于css，是用来改变wxml页面样式的，可以美化页面，对你的页面进行装扮，让你的页面变得更加的漂亮，增加用户体验。
不多说，直接上代码
.nr{
width: 710rpx;
height: 300rpx;
margin-left: 20rpx;
background-color: rgb(230, 225, 225);
display: flex;
justify-content: start;
border-radius: 2rpx;
}
.nr image{
width: 260rpx;
height: 260rpx;
margin-top: 20rpx;
margin-left: 20rpx;
}
如果您对微信小程序还不是特别了解的话，具体可以去微信开放文档查看哦~
4.小程序页面的生命周期和小程序组件生命周期
小程序页面的生命周期
onLoad(options) {
console.log('onLoad监听页面加载');
}
onReady() {
console.log('onReady监听页面初次渲染完成');
}
onShow() {
console.log('onShow监听页面显示');
}
onHide() {
console.log('onHide监听页面隐藏');
}
onUnload() {
console.log('onUnload监听页面卸载');
}
如果您对于小程序页面生命周期还不是特别了解的话，可以去看一看关于小程序页面升周期的其他博客，相信会对您有一些帮助。
小程序组件生命周期
| data | 组件的内部数据，和 properties 一同用于组件的模板渲染 |
|---|---|
| observers | 组件数据字段监听器，用于监听 properties 和 data 的变化，参见 数据监听器 |
| methods | 组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 组件间通信与事件 |
| created | 组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用 setData |
| ready | 组件生命周期函数-在组件布局完成后执行 |
| moved | 组件生命周期函数-在组件实例被移动到节点树另一个位置时执行) |
以上知识一部分具体可查看小程序官方文档
4.封装接口
获取接口数据的时候需要在 生命周期函数–监听页面加载 中获取，
每获取一次都要写大量的代码，在这里我对接口进行了简单的封装，可以 减少很多的代码量，希望会多大家有帮助。
我是习惯创建一个request文件夹在里面写三个js文件，分别是api.js、fetch.js、http.js、
api.js用于管理接口
代码如下：
module.exports = {
"swipe": "/liukaige/banner/list", //轮播图
"classify":"/liukaige/shop/goods/category/all",//分类
"bargain":"/liukaige/shop/goods/list",//砍价
"particulars":"/liukaige/shop/goods/detail",//详情
}
fetch.js用于封装http
代码如下：
//封装 http
module.exports = (url, path, method, params) => {
return new Promise((resolve, reject) => {
wx.request({
url: `${
url}${
path}`,
method: method,
data: Object.assign({
}, params),
header: {
//设置响应头
"Content-Type": "application/x-www-form-urlencoded",
},
success: resolve,
fail: reject,
});
});
};
http.js封装接口完成，页面调用即可
代码如下：
//引入api.js和fetch.js
const api = require('./api.js')
const fetch = require('./fetch.js');
let baseUrl = 'https://api.it120.cc';
function fetchGet(path, params) {
return fetch(baseUrl, path, 'get', params);
}
function fetchPost(path, params) {
return fetch(baseUrl, path, 'post', params);
}
module.exports = {
swipe(params) {
//轮播图
return fetchGet(api.swipe, params);
},
notice(params){
//首页通知
return fetchGet(api.notice, params);
},
}
接下来还需要在app.js全局设置一下
const http=require('./request/http')
App({
http, // http.fetch
})
封装完成那么如何在js文件里调用渲染数据
代码如下：
//引入全局设置
const app = getApp();
//调用封装好的借口
app.http.classify().then((res) => {
this.setData({
classify: res.data.data
})
})
5.路由跳转
1.navigateTo （有返回键，不可以跳转到tabBar页面）
wx.navigateTo({
url: '/pages/detail/detail?id=1'
})
2.switchTab （没有返回键，只能跳转到tabBar页面，不可以携带参数）
wx.switchTab({
url: `/pages/detail/detail`,
})
3.reLaunch (跳转任意页面， 没有返回， 有 首页 按钮)
wx.reLaunch({
url: '/pages/detail/detail'
})
4.redirectTo ( 只可以跳转tabBar 页面， 没有返回，但有首页按钮)
wx.redirectTo({
url: `/pages/detail/detail`,
})
5.navigateBack (应用在目标页面， delta值为1、 表示跳转上一页，2、表示跳转两级)
wx.navigateBack({
delta:1
})
6.路由跳转传递参数
路由跳转传递参数一般用于跳转详情，在这里呢传递的参数是id
代码如下：
<!-- wxml页面 -->
<view class="sp">
<!-- 跳转详情首先要给它一个点击事件，传递id data-id="{
{item.id}}",在这里也可以传递其他参数 -->
<view wx:for="{
{bargaintwo}}" wx:for-index="index" class="spson" catchtap="toparticulars" data-id="{
{item.id}}">
<image src="{
{item.pic}}"></image>
<view class="na">{
{
item.name}}</view>
<text class="te">￥{
{
item.minPrice}}</text>
<text class="ta" wx:if="{
{item.originalPrice!=0}}">￥{
{
item.originalPrice}}</text>
</view>
</view>
// js文件
toparticulars:function(e){
//要传递的参数
let id=e.currentTarget.dataset.id
wx.navigateTo({
//即将跳转的页面和拼接参数
url:"/pages/index/particulars/particulars?id="+id
})
},
7.for循环
微信小程序的for循环的选项是item,下标是index。
代码如下：
<view wx:for="{
{arr}}">
<text>{
{
index}}--- {
{
item}}</text>
</view>
也可以指定遍历选项和下标的别名，
遍历选项：wx:for-item=“xxx”
遍历下标：wx:for-index=“yyy”
代码如下：
<!-- 给遍历的item指定别名，给遍历的下标指定别名 -->
<view wx:for="{
{arr}}" wx:for-item="testItem" wx:for-index="i">
<text>{
{
testItem}} === {
{
i}}</text>
</view>
8.本地存储的几种方式
（1）wx.setStorageSync(); 用于存储
代码如下：
1 try {
2 wx.setStorageSync('key', 'value')
3 } catch (e) {
5 }
（2）wx.removeStorageSync(); 删除指定的值
代码如下：
1 try {
2 wx.removeStorageSync('key')
3 } catch (e) {
4
5 }
（3）wx.getStorageSync(); 获取值
1 try {
2 var value = wx.getStorageSync('key')
3 if (value) {
5 }
6 } catch (e) {
8 }
（4）wx.getStorageInfoSync(); 获取当前存储中所有的 key
1 try {
2 const res = wx.getStorageInfoSync()
3 console.log(res.keys)
6 } catch (e) {
8 }
（5）wx.clearStorageSync(); 清除所有的key
1 try {
2 wx.clearStorageSync()
3 } catch(e) {
5 }
以上都是同步的存储，异步存储和同步存储方法一样，在这里就大致列举一下
（1）wx.setStorage(); //存储值
（2）wx.removeStorage(); // 移除指定的值
（3）wx.getStorage(); // 获取值
（4）wx.getStorageInfo(); // 获取当前 storage 中所有的 key
（5）wx.clearStorage(); // 清除所有的key
8.页面配置
| backgroundColorTop | 顶部窗口的背景色，仅 iOS 支持 |
|---|---|
| backgroundColorBottom | 底部窗口的背景色，仅 iOS 支持 微信客户端 6.5.16 |
| style | 启用新版的组件样式 |
| navigationBarBackgroundColor | 导航栏背景颜色，如 #000000 |
以上只是一点点例子，要想更深入的了解可以去微信开放文档查看。
微信小程序页面配置官方文档