微信小程序开发：基础知识

一、基本设置

1、导航栏的基本设置

属性	类型	默认值	描述
navigationBarTitleText	string		导航栏标题
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色

2、Tabbar基本设置

在 app.json文件中添加如下代码:

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
 },
"tabBar": {
    "color": "#000",
    "selectedColor": "#f23030",
    "backgroundColor": "#0094ff",
    "list":[{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icons/tabbar_1.png",
      "selectedIconPath": "icons/tabbar_1a.png"
    },{
      "pagePath": "pages/index2/index2",
      "text": "日志",
      "iconPath": "icons/tabbar_2.png",
      "selectedIconPath": "icons/tabbar_2a.png"
    }]
  },

3、数据绑定

数据都需要定义在data中：

index.js代码如下：

Page({
  data: {
    num: 1000,
    isBoy: true,
    person: {
      name: "小龙女",
      height: 190
    }
  }
})

index.wxml代码如下：

<view>num: {{num}}</view>
<view>isBoy: {{isBoy}}</view>
<view>name: {{person.name}}</view>
<view>height: {{person.height}}</view>

4、列表渲染

项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名；

下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名；

5、样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表带相对路径，用;表示语句结束。

@import "common.wxss"

.middle-p{
	padding:15px;
}

6、选择器

选择器	样例	描述
.class	.intro	选择所有拥有class="intro"的组件
#id	#firstname	选择拥有id="firstname"的组件
element	view	选择所有view组件
element,element	view,checkbox	选择所有文档的view组件和所有的checkbox组建
:after	view:after	在view组件后边插入内容
:before	view:before	在view组件前边插入内容

7、全局样式与局部样式

定义在app.wxss中的样式为全局样式，作用于每一个页面。在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器。

二、基本组件

1、Swiper轮播图

swiper微信内置的轮播图组件，默认宽度100%，高度150px。

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	raga(0,0,0,3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
interval	Number	5000	自动切换时间的间隔
circular	Boolean	false	是否采用衔接滑动

代码示例

<swiper autoplay indicator-dots indicator-color="blue">
	<swiper-item><image mode="widthFix" src="../../images/1.jpg"></swiper-item>
	<swiper-item><image mode="widthFix" src="../../images/2.jpg"></swiper-item>
	<swiper-item><image mode="widthFix" src="../../images/3.jpg"></swiper-item>
	<swiper-item><image mode="widthFix" src="../../images/4.jpg"></swiper-item>
</swiper>

2、navigator导航跳转

属性名	类型	默认值	说明
target	String	self	默认值当前小程序，可选值self/miniProgram
url	String		当前小程序内的跳转链接
open-type	String	navigate	跳转方式

open-type有效值：

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面
switchTab	跳转到tabBar页面，并关闭其他所有非tabBar页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面。可以通过getCurrentPages()获取当前的页面栈，决定需要返回几层
exit	退出小程序，target="miniProgram"时生效

代码示例

<!--保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面 -->
<navigator url="../index11/index11" open-type="navigate">index11</navigator>

<!--关闭当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面 -->
<navigator url="../index11/index11" open-type="redirect">index11</navigator>

<!--跳转到tabBar页面，并关闭其他所有非tabBar页面 -->
<navigator url="../index/index" open-type="switchTab">index</navigator>

<!--关闭所有页面，打开到应用内的某个页面 -->
<navigator url="../index/index" open-type="reLaunch">index</navigator>

3、video视频播放

属性名	类型	默认值	说明
src	String
duration	Number		指示视频长度
controls	Boolean	true	是否显示默认播放控件(播放/暂停/播放进度/时间)
autoplay	Boolean	false	是否自动播放
loop	Boolean	false	是否循环播放
muted	Boolean	false	是否静音播放

代码示例

<video src="http://files.ak48.mp4" controls duration="60" autoplay muted></video>

####4、自定义组件

新建一个components 文件夹，与pages目录同级别。然后在components目录下，以组件的名称新建如下文件:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jBaRBzG8-1583820380469)(./images/[email protected])]

那么如何使用自定义组件呢？比如在index页面里面需要引用自定义的MyTitle组件。首先需要在index.js文件中引入组件的路径。

{
  "usingComponents": {
    "MyTitle": "../../components/MyTitle/MyTitle"
  },
  "navigationBarTitleText": "首页"
}

然后，在index.wxml中添加MyTitle组件:

 <!-- 公共头部 -->
 <MyTitle></MyTitle>

5、按钮添加点击跳转事件

index.wxml添加按钮组件:

 <button class="bottom_container_qrcode_btn" bindtap="verify_friend">认证他人</button>

index.js添加按钮跳转逻辑:

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    
  },
  //事件处理函数
  verify_friend: function() {
    wx.navigateTo({
      url: '../../pages/verify/verify_friend',
    })
  }
})