微信小程序的基础入门知识点

时间:2020-10-24 作者:admin

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

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。