小程序 文件配置 及 简单基础使用

一.小程序文件配置

(一).全局配置文件:

App.json

1.page字段: 配置小程序页面路径
里面的路径相当于vue的路由,谁在最上面显示谁

{
	"pages":[
		"pages/index/index" //路径
	]
}

2.window:配置顶部导航栏

  {
    "window": {
      "navigationBarBackgroundColor": "#ffffff", 
      "navigationBarTextStyle": "black", 
      "navigationBarTitleText": "微信接口功能演示", 
      "backgroundTextStyle": "light"
    }
  }

常用配置项:

属性	用法
navigationBarBackgroundColor	导航栏背景颜色
navigationBarTextStyle	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	导航栏标题文字内容
backgroundColor	窗口的背景色(刷新背景色)
backgroundTextStyle	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	是否开启全局的下拉刷新 仅支持布尔值true / false

3.tabbar:配置底部导航栏

 "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath":"img/icon.png",
        "selectedIconPath":"img/icon(1).png"
      },
      {
        "pagePath": "pages/TFboys/TFboys",
        "text": "TFboys"
        "iconPath":"img/icon2.png",
        "selectedIconPath":"img/icon(2).png"
      }
    ],
    "backgroundColor":"#4169E1",
    "selectedColor":"#B22222"
  },

常用配置项:

属性	用法
pagePath	页面路径，必须在 pages 中先定义
text	tab 上按钮文字
iconPath	图片路径,icon 大小限制为 40kb(不支持网络图片) (注意:当 position 为 top 时,不显示 icon。)
selectedIconPath	选中时的图片路径
position	tabBar 的位置，仅支持 bottom / top
color	tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	tab 上的文字选中时的颜色
backgroundColor	tab 的背景色
borderStyle	tabbar 上边框的颜色， 仅支持 black / white

示意图:

注意:其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab

(二).页面配置文件:

page.json 配置
指页面目录下的page.json,开发者可独立定义每个页面的一些属性,如:顶部颜色,是否下拉刷新等.文件内容为一个 JSON 对象

注意:页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。

{
	 //使用组件注册
	 "usingComponents": {}
	 //是否开启当前页面的下拉刷新  布尔值
	 "enablePullDownRefresh":true  
}

其他的一些配置项与全局配置中的window配置相同.详情参考:页面配置

(三).sitemap 配置

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引.

二.基础使用

(一)标签认知:

1.text标签相当于span标签不会换行

//selectable 长按可复制
//decode 对文本解码
<text selectable decode>text &nbsp; 1234 </text>

2.view标签相当于div标签

<view>王俊凯<view>
<view>刘宇宁</view>

3.rich-text 富文本标签

//node属性来实现 接收标签字符串,接收对象数组
<rich-text nodes="{{html}}"></rich-text>

4.icon标签:

//type类型图标: success|success_no_circlelinfo|warn/waiting|cance1/download|search|clear
//size大小
//color 颜色
<icon type="sucess" size="6" color="blue"></icon>

5.radio单选框:

//value 选中的单选框的值
//bindchange给radio-group 绑定change事件
<radio-group bindchange="handlechange">
<radioIcolor="red" value="male">男</radio>
<radio color="red" value="female">女</radio></radio-group>
<view>您选中的是:{fgender}}</view>

注意:radio标签必须要和父元素 radio-group来使用,需要在页面中显示选中的值,需要给radio-group 绑定change事件

6.checked复选框:

//wxml
<view>
	<checkbox-group bindchange="handleItemChange">
		<checkbox value="i{item.value}}" wx:for="{{list}}" wx:key="id"ifitem.name}}</checkbox>
	</checkbox-group>
	<view>
		选中的水果:{{checkedList}}
	</view>
</view>

//json
data{
	...
	checkedList:[]
},
//复选框的选中事件
handleItemChange(e){
	//获取被选中的复选框的值
	const checkedList=e.detail.value;
	//2进行赋值
	this.setData({
		checkedLib
	})
}

(二).数据绑定:

页面目录下的js文件 中 Page({ })中的data存放

//page.js文件
Page({
	data:{
		msg:'王俊凯',
		num:22,
		bool: true,
		Person:{
			height:181,
			weight:120,
			fans:'小螃蟹'
		}
	}
})

//page.wxml文件
//字符串
<view>{{msg}}</view>
//数值:
<view>{{num}}</view>
//布尔 
//字符串和属性间不要有空格
<view>
	<checkbox checked="{{bool}}"></checkbox>
</view>
//对象
<view>{{person.height}} </view>
<view>{{person.weight}} </view>
<view>{{person.fans}} </view>

(三).运算:

在花括号中加入表达式:数字的加减,字符串的拼接,三元表达式

<view>{{1+1}}</view>
<view>{{"1"+"1"}}</view>
<view>{{10%2===0 ? '偶数' : '奇数'}}</view>

(四).列表渲染: wx:for

数组:

//js
data:{
	list:[
		{
			id:0,
			name:'王俊凯'
		},
		{
			id:1,
			name:'王源'
		},
		{
			id:2,
			name:'易烊千玺'
		}
	]
}

//wxml
<view wx:for="{{list}}" wx:for-item='item' wx:for-index='index' wx:key='id'>
	index:{{index}}
	----
	内容:{{item.name}}
</view>

对象:

<view wx:for='{{person}}' wx:for-item='value' wx:for-index='key' wx:key="weight"></view>

(五).条件渲染:

可以用 wx:if 或者 hidden

//1.
<view wx:if="{{condition}}"> True </view>

//2.
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

//3.
<view hidden> 4 </view>
<view hidden="{{true}}"> 5 </view>

注意:wx:if和hidden区别:
wx:if 有更高的切换消耗,而hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好

---

总结:

以上,是微信小程序开始所必需的环境文件配置以及一些基础标签和数据操作.
其实微信小程序开发工具的使用与vue的使用方法其实差不了多少,还有很多像轮播图,组件,插槽等的知识.下期见…