小程序1

基本结构

• sitemap.json 站点地图 微信搜一搜里面那些页面可以展示，那些不可以
• project.config.json 项目配置
• app.js 全局业务逻辑
• app.json 全局小程序配置
• app.wxss 全局样式
• pages 存放页面文件夹
• index 首页页面文件夹
  1. index.js 首页业务逻辑
  2. index.json 首页配置
  3. index.wxml 首页模板 （html）
  4. index.wxss 首页样式（css）
• logs日志页面文件夹
• utils 存放工具的文件夹

app.json (json文件不能注释，最后一个选项不能有逗号)

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{//window窗口配置
    "backgroundTextStyle":"light", //背景文字颜色
    "navigationBarBackgroundColor": "#f70",//导航栏颜色
    "navigationBarTitleText": "小程序基础语法",//导航栏标题
    "navigationBarTextStyle":"white"//导航栏文字颜色只有white|black
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

更多配置：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

基础语法

标签

1. view view块级元素 默认垂直排列
2. text text行内元素 水平排列
3. css中单位可以使用px rpx vh vw 推荐使用rpx 。rpx一个屏幕的宽都是750rpx

文本展示

js:

data: {
      msg:"你好小程序"
  },

wxml:

<view>文本展示:{{msg}}  </view>
<!--
    可以运用简单的js语法:{{3+4}}
	msg的长度{{msg.length}} 
	三目运算
	字符加引号：{{msg+'i love'}}
-->

图片

<image src="./images/car.png"></image>

图片模式

更多：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

条件渲染

wx:if wx:elif wx:else

<view wx:if="{{flag}}">欢迎</view>
<view wx:if="{{num>2}}">团长</view>
<view wx:elif="{{num>1}}">连长</view>
<view wx:else>小兵</view>

for循环

wx:for="{{list}}" wx:key="index"
使用:{{index}}索引 {{item}}值

<view wx:for="{{list}}" wx:key="index">
  {{index+1}}---{{item}}
</view>

for–自定义 多层循环渲染

<view wx:for="{{list}}" 
	wx:for-item="myitem"
	wx:for-index="myindex"
	wx:key="myindex">
  {{myindex+1}}---{{myitem}}
</view>

template 模板

在模板中定义代码片段，然后在不同的地方调用

<template name="stydents">
<view>
  <view>名称:{{name}}</view>
  <view>年龄:{{age}}</view>
</view>
</template>
<template is="stydents" data="{{...stu[0]}}"></template>
<template is="stydents" data="{{...stu[1]}}"></template>
 <!-- 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
 -->

import 导入模板

新建stu.wxml文件

<template name="stydents">
  <view>
    <view>名称:{{name}}</view>
    <view>年龄:{{age}}</view>
  </view>
  </template>
  <template is="stydents" data="{{...stu[0]}}"></template>
  <template is="stydents" data="{{...stu[1]}}"></template>

在页面中使用import引入

<import src="./stu.wxml" />
  <template is="stydents" wx:for="{{stu}}" wx:key="index" data="{{...item}}"></template>

include 复制src中的内容除了模板

新建wxml文件

<view>
  <view>PRC</view>
  <view>PRC</view>
  <view>PRC</view>
</view>

在页面中引入

<include src="./PRC.wxml" /> 
<!--
include 复制src中的内容除了模板 如果src中也有include可以嵌套 
  import 主要功能是导入模板
-->

事件

事件响应

bindtap

<view class="title" bindtap="showMsg">事件响应</view>

showMsg(){
    console.log("hi")
  },

事件参数

bindtap轻点
wxml:

<view bindtap="showMsg" data-msg="我喜欢你">事件参数</view>

js:

showMsg(e){
    console.log(e.target.dataset.msg)
  },

表单与双向绑定

bindinput表单值发生改变
wxml:

<input value="{{msg}}" bindinput="inputHd"/>
<view>{{msg}}</view>

js:

inputHd(e){
    console.log(e.detail.value)
    this.setData({msg:e.detail.value})//setData设置值
  },

参数e的值：

API

提示

wx:showToast({title:""})

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

注意:

• wx.showLoading 和 wx.showToast 同时只能显示一个
• wx.showToast 应与 wx.hideToast 配对使用