微信小程序——网站开发热身下篇完结

app.json
{
  "pages":[                                         所有页面组成的list
    "pages/index/index"
  ],
  "window":{                                        控制导航栏即标题
    "backgroundTextStyle":"light",                  粗dark，细light
    "navigationBarBackgroundColor": "#000",         000是黑，FFF是白
    "navigationBarTitleText": "CJ_wechat_project",  标题文字
    "navigationBarTextStyle":"white"                文字颜色
  },
  "tabBar": {                                       底部菜单栏
    "list": [{
      "pagePath": "pages/index/index",              指向页面
      "text":"主菜单",                               文字
      "iconPath": "pages/images/n2.png",            未选中时图标
      "selectedIconPath": "pages/images/n1.png"     选中时图标
    },{
      "pagePath": "pages/CJ_hello/CJ_hello",
      "text": "hello页面",
      "iconPath": "pages/images/m2.png",
      "selectedIconPath": "pages/images/m1.png"
    }]
  },
  "sitemapLocation": "sitemap.json"                 不用管
}

app.js与app.wxss保持为空即可

js文件
变量：Undefined,Null,Boolean,String,Number,Array,Object
数值转字符串：number.toString()或String(number)
字符串转数据：string.toNumber()或Number(string)
字符串转对象：JSON.parse()
var s=['a','b','c']
s.push('d')->['a','b','c','d']
s.unshift('d')->['d','a','b','c']
s.splice(1,2)->['d','c']

下面的内容用到时看官方开发手册照着参数选即可
wxml文件
组件
<view>视图
<button>按扭
<navigator>页面跳转
<text>文本
<scroll-view>可滚动视图区域
<swiper>滑块视图容器
<icon>图标
<progress>进度条
<checkbox>多选框
<form>表单
<label>标签
<picker>选择器
<picker-view>滚动选择器
<radio>按钮
<slider>滑动选择器
<input>输入框
<switch>开关选择器
<textarea>多行输入框
<audio>声音
<image>图片
<video>视频
<map>地图
<canvas>画布
<contact-button>客服对话

通用属性
class
size
color
id
style
hidden是否隐藏
bindtap绑定方法

wxss文件
所有手机屏幕宽度大小毕为750rpx
background-attachment=fixed,scroll背景图随页面其余部分滚动
background-color=red背景色
background-image=url('image/a.png')背景图
background-position=center背景图位置
background-repeat=repeat,no-repeat如何重复背景图
background-blend-mode=hard-light背景混合
background-clip=border-box背景绘制
background-origin=padding-box背景相对定位
background-size=80rpx,60rpx背景图像尺寸
border-bottom=thick设置下边框所有属性
border-bottom-color=red下边框颜色
border-bottom-style=dotted下边框样式
border-bottom-width=2px下边框宽度
border-bottom-image=url()边框图像
border-block-start=5px边界块开始
border-inline-end=5px边界内结束点
border-radius=25px边框圆角
font-family=simsun字体系统
font-size=5px字体大小
font-size-adjust=0.6小写字母x高度与font-size高度之间比值
font-stretch=wider拉缩当前字体系统
font-style=italic文本字体样式
font-variant=small-caps是否以小型大写字母字体显示文本
font-weight=bold规定字体粗细
margin=10px 0px 0px 0px 外边距
margin-bottom=10px下外边距
margin-left=10px左外边距
margin-right=10px右外边距
margin-top=10px上外边距
padding=10px 10px 10px 10px 
padding-bottom=10px下内边距
padding-left=10px左内边距
padding-right=10px右内边距
padding-top=10px上内边距
display=none隐藏元素
display=block块级元素，前后换行
display=inline内联元素，前后不换行
display=inline-block行内块元素
display=flex弹性布局
#FF0000红
#00FF00绿
#0000FF蓝

各页面菜单，有wxml,wxss,js,json四个文件，json一般为空（继承了app.json）
【wxml中，尽量只用view来控制格式分布！其余元件尽量只用于控制功能！】
一、上文布局设置：
  flex=1 or 2 or 3 or 4 or 5 or ....;当前widget所占比例
二、边界布局设置
  margin:10rpx;外边距
  border:10rpx solid rgba(0,0,0,2);线框粗10rpx且实体及颜色
  border-radius:10rpx;圆角半径
  padding:10rpx;内边距
三、下文布局设置：
  dispaly=flex;灵活分布
  flex-direction=row;行分布
  position:relative;设为相对布局
  left:25%;左边缘距离屏幕左边缘屏宽25%处
  align-items: center;直接使到子对象在中间的位置
四、内容背景设置
  background:#ddd;背景颜色是灰色
  background-image:linear-gradient(#000,#FFF);背景颜色是黑白渐变
五、内容文字设置（可以是其他子控件）
  text-align:center;位置在中间，如果没有这个，就由父对象(即本view)的padding决定
  font-size：字体大小
  color:#FFF;颜色是白色

关于form与input与button样式控制问题
form：bindsubmit与bindreset必须各绑定一个方法
input： value=初始内容
        type=text/number/idcard/digit
        placeholder=提示文字
        bindinput=输入框内容修改时触发的事件响应
        name='xxname'在js文件中可以用e.detail.value.xxname来读取内容
button：size=default（由父对象padding控制）/mini（由文字控制）
        type=primary/default/warn（绿白红）
        formtype=submit/reset（触发from绑定的方法）

关于switch对view的控制作用
<switch bindchange="switchchange"/>每次操作得了会触发函数调用
  <view wx:if="{{condition}}">....</view>上面的函数控制condijtion=true
  <view wx:else>....</view>上面的函数控制condijtion=false

除了底部菜单可以导航，页面内也可以用导航控件
<navigator url="../CJ_hello/CJ_hello"> <button type='default'> a </button> </navigator>