[移动开发]微信小程序基础学习

小程序的开发得安照腾讯的要求来，但是它也是把html-css-js 封装集成罢了（还有个json)，学一下它的基础语法。
语法思想跟vue差不多

• html-wxml
• js-js
• css -wxcss
• json

全局配置

• 位于app.json 中

官网解释链接

注意window对象中backgroundColor 是下拉刷新颜色

 {
  "pages":[
    "pages/demos/demo01",
    "pages/demos/color",
    "pages/index/index",
    "pages/logs/logs"
  
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#cca4e3",
    "navigationBarTitleText": "余小C_C",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true,
    "backgroundColor": "#e0f0e9" 
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/demos/demo01",
        "text": "首页",
        "iconPath": "icon/home_page.png",
        "selectedIconPath": "icon/home_page_selected.png"
      }, {
        "pagePath": "pages/demos/color",
        "text": "色卡",
        "iconPath": "icon/color.png",
        "selectedIconPath": "icon/color_select.png"
      }
    ],
    "color": "#1e131d6",
    "selectedColor": "#065279"

  }
}

页面配置：每个页面的单独配置 但是只能覆盖window属性
xx.json

{
  "usingComponents": {},
  "navigationBarTitleText": "余小C_C-首页 "
}

sitemap配置:其实就是别人搜索小程序时你的索引关键词。
后面再弄

模板语法重点：

text相当于span 行内元素 标签
view 相当于div标签

• 数据绑定：
• js中设置
• {{}}调用即可跟vue差不多
• 对象不可直接调用

data: {
        msg:"233",
        num:1234,
        isbooll:true,
        person:{
            age:10,
            name:"余小c"
        }
    },

<view>{{msg}}</view>
<view>{{num}}</view>
<view>{{isbooll}}</view>
<view>{{person.name}}</view>
<view data-index="{{num}}">自定义属性</view>
<checkbox checked="{{isbooll}}"></checkbox>
<!-- {{}}不要加空格  -->

表达式

<!-- {{}}1.可以进行表达式运算 和vue差不多  
            数字加减 字符拼接 三元表达式 等
2.语句 if else switch do while for 等
-->
<view>{{1+1}}</view>
<view>{{"1"+"1"}}</view>
<view>{{3>2 ? '233' : "ddd"}}</view>

对象数组循环：

<!-- 数组 对象
列表循环 1.wx:for="{{数组或者对象}} wx:for-item="item" 
    wx:for-index="index""
    2.wx:key = "唯一的值"
    3.嵌套循环注意 item 不要一样
-->
<view>------</view>
<view>
    <view 
    wx:for="{{list}}" 
    wx:for-item="item" 
    wx:for-index="index"
    wx:key="id">{{index}}{{item.name}}</view>
</view>

<!-- 占位符 文字保留 标签去掉-->
<block>
77
</block>

<!--pages/demos/demo02.wxml-->
<text>pages/demos/demo02.wxml</text>
<!-- 定义模板 -->
<template name='tem'>
    <view>
        <text> {{index}}: {{msg}} </text>
    </view>
</template>
<!-- 声明模板并传入数据，is可以使用表达式 -->
<template is="tem" data="{{...item}}"/>
<!-- 引入外部模板 -->
<!-- <import src='xxx.wxml'> -->
<!-- import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。 -->

<!-- include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置 -->

wxs

<wxs module="tool">
    var x = "23456";
    module.exports = {
        x : x,
    };
</wxs>
<view>{{tool.x}}</view>
<view></view>
<!-- module.export.msg = x;单个 -->
<!-- 其实就是封装的js 一个wxs标签或者文件有自己的作用域 外部调用 moudle.export 对外共享私用变量 -->

<!-- 其他与js基本差不多 -->

require 引入模块。返回模块通过 module.exports 或 exports 暴露的接口。

自定义组件：
父向子传数据：properties: 属性值传值，
子向父：
组件：triggerEvent(“自定义事件名”,{对象数据});
父：<fristTab tabs="{{tabs}}" bind自定义事件名="接收方法"></fristTab>

绑定事件 bind 加事件名

注意一般小程序不允许操作dom元素
做法： 通过绑定事件操作data 从而改变视图层。