那些关于微信小程序的基础入门知识点

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组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用 setDataready组件生命周期函数-在组件布局完成后执行moved组件生命周期函数-在组件实例被移动到节点树另一个位置时执行)properties组件的对外属性，是属性名到属性设置的映射表

以上知识一部分具体可查看小程序官方文档

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.16style启用新版的组件样式navigationBarBackgroundColor导航栏背景颜色，如 #000000

以上只是一点点例子，要想更深入的了解可以去微信开放文档查看。 微信小程序页面配置官方文档