文件介绍

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

基础组件

view 块元素
text 行内元素

文本渲染

{{ }}

条件渲染

wx:if="{{ }}"
wx:elif=" "
wx:else

列表渲染

wx:for="{{list}}" wx:key=" index"
wx:for 自带item index
wx:for-item="myitem" 自定义item名称
wx:for-index="myindex" 自定义修改index名称

模板

wxml里面：

<template name="gotoc"> <view> <view>{{name}}</view> <view>{{age}}</view> </view> </template> <template is="gotoc" data="{{...sng[0]}}"></template> <template is="gotoc" data="{{...sng[1]}}"></template> <template is="gotoc" data="{{...sng[2]}}"></template> 

js里面

sng:[ {name:"zsq",age:25}, {name:"hlk",age:24}, {name:"wry",age:23}, ] 

导入模板

<import src="xxx.wxml"/> 

引入内容

<include src= " xxx.wxml"/> 

目录结构

app.json 整个小程序的配置
pages页面 配置在最前面的默认显示

window： "window": { "backgroundTextStyle": "light", 背景文字     "navigationBarBackgroundColor": "#f70", 导航栏背景颜色     "navigationBarTitleText": "小程序入门", 导航栏标题     "navigationBarTextStyle": "black"    导航栏文字颜色 black 和white 可选   }, 

组件

input
type=” ” （↓）

• number 数字输入键盘
• text 文本输入键盘
• idcard 身份证输入键盘
• digit 带小数点的数字键盘
• password 是否为密码 true或false
• maxlength 最大输入长度，设置为 -1 的时候不限制最大长度

image

• mode 缩放模式

api wx开头的

wx.showToast({title:" "}) 吐司
wx.getStorageSync（key） 获取本地存储
wx.setStorageSync(key，val) 设置本地存储

wx.request({    url:"xxx", method:"", success(res){ console.log(res) } }) //网络请求 

wx.setNavigationBarTitle({ title:" 设置标题", icon:" " }) 

wx.stopPullDownRefresh({}) 停止下拉刷新
wx.showLoading 开始加载
wx.hideloadind 加载结束

bind事件

• bindtap 轻点
• bindinput 表单的值是否发生改变
• bindfocus 输入框聚焦时触发
• bindblur 输入框失焦时触发
• bindconfirm 点击完成按钮

监听事件

 <view bindTap="showMsg"/> 

事件的参数获取
表单 **js**中通过 e.detail.value
其他组件

<button bindtap="ShowMsg" data-msgz="自定义吐司">自定义</button> 

wx.showToast({               title:e.target.dataset.msgz, }) 

事件的函数

onReachBottom 触底
onPullDownRefresh 下拉刷新

json文件↓

导航

navigator
url=“要跳转页面的url路径”
open-type：

• switchTab 切换底部栏
• navigate 默认跳转
• exit 退出
• relaunch 重启
• redirect 重定向
• navigateBack 返回

//跳转到其他小程序 <navigator target="miniProgram" open-type="navigate" app-id="wxb8f91a4e8d7eb4ae">打开绑定的小程序</navigator> 

navigator target="miniProgram" open-type="navigate" app-id="小程序ID" 

JS跳转

wx.switchTab({           url: '/pages/base/base', }) 

 wx.redirectTo({  重定向        url: '/pages/zsq/zsq', }) 

wx.navigateBack() 返回
wx.swithTab({ url:" "}) 切换底部栏

页面传参

//通过url传参 pages/base/base?name=zsq&age=30 

取参数 TabBar

"tabBar": { "color": "#ccc", 文字颜色     "selectedColor": "#0000cd", 选中文字的颜色     "list": [ { "pagePath": "pages/index/index", //页面路径 "text": "首页", //tabbar名称 "iconPath": "pages/images/zwpj2.png",   图片的地址       "selectedIconPath": "pages/images/zwpj.png"  选中图片的地址      }, { "pagePath": "pages/base/base", "text": "笑话", "iconPath": "pages/images/res2.png", "selectedIconPath": "pages/images/res.png" } ] }, 

小程序生命周期

• onLaunch 程序启动
• onShow 程序切换到前台
• onHide 程序切换到后台
• onError 程序发送错误

页面的生命周期

1. onLoad 页面加载
2. onReady 渲染完毕
3. onShow 显示
4. onHide 隐藏
5. onUnload 卸载(redirect、navigateBack触发)

全局数据使用(传递)

在app.js 定义

 globalData: {     userInfo: null,     num:20 }, 

在其他Page文件使用

const app = getApp(); /*引入*/ 

在监听生命周期函数中显示

 this.setData({       num:app.globalData.num   }) 

页面跳转

//标签跳转 <navigator url="/pages/base/base" open-type="navigate">naviga</navigator> <navigator url="/pages/base/base" open-type="switchTab">笑话</navigator> <navigator url="/pages/zsq/zsq" open-type="redirect">没返回的</navigator> 

//js跳转 Gofile1(){ //普通跳转     wx.switchTab({       url: '/pages/base/base', }) }, 

 Gofile2(){ //不需要返回的跳转     wx.redirectTo({       url: '/pages/zsq/zsq', }) }, 

小程序的组件

定义组件

组件文件夹 cell

• cell.js
• cell.json
• cell.wxml
• cell.wxss

在页面的json中注册组件

{ "usingComponents": { "cell":"/components/cell/cell" } } 

在页面的wxml中使用

<cell></cell> 

组件的插槽

目的：组件可以嵌套

页面中传入插槽内容

<cell><view>定义插槽内容</view></cell> 

在组件接收

<view><slot></slot></view> 

命名插槽

定义

<view> <view slot="header"></view> <view slot="footer"></view> </view> 

使用插槽

<slot name="header"></slot> <slot name="footer"></slot> 

在组件的options选项中配置

multipleSlot:true 

样式隔离

options选项中配置

// styleIsolation:'isolated',   样式隔离方式     // isolated 隔离 // apply-shared 页面样式到组件  // shared 双向共享 

外部类

组件中配置

externalClasses:["cell-class"], 

组件中使用

<class="cell-class"> 

页面中传入

<cell cell-class="mycell"> 

在页面css中编写mycell

.mycell{height:200rpx !important;} 

组件的传参

页面参数传递

<cell url="xx/x/x/"></cell> 

组件作用定义

properties: {     url:{type:String,value:''}, }, 

使用参数

this.data.url 

构造器

page({})
Components({})

pageLifetimes 页面的生命周期

• show显示
• hide隐藏
• resize改变大小
• lifetimes 组件的生命周期
• created 创建
• attached 插入到页面
• ready 渲染完毕
• move 移动
• detached 移除
• error 错误

behaviors 混合

var myBehavior = require('my-behavior') Component({   behaviors: [myBehavior], }) 

observers 监听

 observers: { 'numberA, numberB': function(numberA, numberB) { // 在 numberA 或者 numberB 被设置时，执行这个函数 this.setData({         sum: numberA + numberB       }) } } 

纯数据字段

纯数据字段是一些不用于界面渲染的data字段，可以用于提升页面更新性能

 options: {     pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段 },   data: {     a: true, // 普通数据字段     _b: true, // 纯数据字段 }, 

登录

小程序

<button open-type="getUserInfo" ></button> 

wx.login({ }) 拿到一个code信息
通过ajax把用户信息和code发送给服务器

服务器

appid+Appscecret+code
发送给微信服务器
得到openid，得到session_key
openid就是用户的唯一识别id
有了openid，加上用户名+昵称，存入到自己的服务器的数据库中