微信小程序基础知识点

  1. 配置

  1. 全局配置  app.json 

1.1 pages 存放页面的路径 首页就是一个路径

1.2 window 窗口信息 

"backgroundTextStyle":"light",  背景颜色

"navigationBarBackgroundColor":"#000"    导航栏背景颜色

"navigationBarTitleText":"小程序开发"   导航栏标题

"navigationBarTextStyle":"white"    导航栏文本颜色    (white|black  两种颜色调换)

2.1 页面配置    页面.json

同app.json  window  配置只对当前页面启用会覆盖全局配置

微信小程序基础知识点_第1张图片

2.页面结构

xxx.js  业务逻辑  

xxx.json  页面的配置

xxx.wxml  页面的模板

xxx.wxss  页面样式

微信小程序基础知识点_第2张图片
微信小程序基础知识点_第3张图片

3. wxss的单位

小程序单位rpx  750rpx就是一个屏幕的宽

4.条件编译

帮助切换小程序的默认启动页面(首页)()

微信小程序基础知识点_第4张图片

5.基础组件

view 容器    text 文本

6.不校验合法域名

工具栏  -- 详情-- 本地设置 -- 请勾选  不校验

7.渲染指令

  1. {{}}  文本渲染指令

文本渲染
{{msg}}
{{2+3}}
{{msg.length>5?'大于':'小于等于5'}}
微信小程序基础知识点_第5张图片

2.条件 

wx:if = "{{}}"
wx:elif = "{{}}"
wx:else  其他
多重条件渲染
奖励1
奖励2
奖励3
奖励4
微信小程序基础知识点_第6张图片

3.遍历

wx:for="{{}}"  需要指定wx:key="index"     index遍历元素的下标  item代表变量的元素
对象,数组,数字,字符串都可以被遍历  
自定义item与index(多重遍历)
wx:for="list" wx:for-item=="myitem" wx:for-index="ind"
wx:key="ind"

列表渲染
 {{index+1}}-{{item}} 
 {{index+1}}-{{item}} 

   {{index+1}}-{{item}} 


   {{index+1}}:{{item}} 
微信小程序基础知识点_第7张图片

4.include

把文件单纯拷贝过来    include 是直接把内容拷贝 不能拷贝template模板 也不能递归拷贝

include导入

微信小程序基础知识点_第8张图片

  1. import+ template

01 import 导入只能导入template 也递归导入

02 import 导入后 采用