小程序新手学习

小程序简介

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

配置 

全局配置：

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

 window窗口信息

"backgroundTextStyle": "light",
背景颜色
    "navigationBarBackgroundColor": "#f30",
导航栏背景颜色
    "navigationBarTitleText": "亮亮玩小程序",
导航栏标题
    "navigationBarTextStyle": "white"
导航栏文本颜色 white | black

页面配置： 

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

"enablePullDownRefresh": true,
允许下拉刷新
 "backgroundTextStyle": "dark",
背景文字颜色（下拉才能看见）
 "backgroundColor": "#f30",
背景颜色（下拉才能看）

页面结构

xxx.js 业务逻辑
xxx.json 页面的配置
xxx.wxml 页面的模板
xxx.wxss  页面样式 

 

WXSS的单位

小程序单位 rpx

750rpx 就是一个屏幕的宽

条件编译

帮助切换小程序的默认启动页面（首页）

基础组件

1. view  容器
2. text 文本
3. image 图片
4. input 表单
5. template 模板

1.  navigator跳转

• url跳转的页面
• /pages/todo/todo
• ../todo/todo

1. open-type打开类型

• navigate默认跳转
• redirect
  重定向（原页面的历史记录被跳转页面替换）
• switchTab
  跳转到底部栏对应页面
• navigateBack
  返回
• relaunch
  重置
• navigateBack 回退上一级

不校验合法域名

方便个人编写

 

渲染指令

{{}}
文本渲染指令

1. 条件

• wx:if="{{}}"
• wx:elif="{{}}"
• wx:else
  其他

1. 遍历

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

1. include

• 把文件单纯拷贝过来
  <include src="url">

1. import+template

• 定义template
  <template name="user">
     用户名：{{name}}
  </template>
• 使用
  <import src="url">
  <template name="user"  data={{...list[0]}}>

事件

1. 事件响应

• bindtap=“函数名”
  被点击
• bindinput=“”
  表单发生变化
• bindconfirm=""
  确认键
• bindlongPress=“”
  长按

1. 实现传参

• <view data-msg="参数" bindtap=“tapHd”>
• e.target.dataset.msg
• e.detail.value
  表单的值

1. 表单的双向绑定

• <input value="{{msg}}" bindinput="inputHd">
• inputHd(e){
     this.setData({msg:e.detail.value})
  }

小案例todolist

.WXML 页面

 

.WXSS页面 

 

 

 

api

1，网络请求

wx.request({
 url,method,header,success,fail,complete
})

2，界面类

• wx.showToast({title,icon})
  提示
• wx.showModal({title,content,success,fail}))
  确认框
• wx.showLoading()
  显示加载提示
• wx.pageScrollTo({duration,scrollTop})
  滚动页面

3,数据缓存

• wx.getStorageSync(key)
  取
• wx.seetStoreageSync(key,value)
  存

4,路由

•  wx.navigateTo({url})
  普通跳转
• wx.redirectTo({url})
  重定向
• wx.switchTab({})
  底部栏跳转
• wx.navigateBack()
  返回
• wx.reLaunch({url})
  重启

生命周期

1,小程序的生命周期

• onLaunch
  启动
• onShow
  前台显示
• onHide
  后台运行
• onError
  错误
•   onPageNotFound
  页面找不到

2,页面的生命周期

• onLoad(option)
  加载
• onShow
  显示
• onHide
  隐藏
• onReady
  准备完毕（操作节点）
• onUnload卸载

页面传参

url=“xxxx?num=15”

onLoad(options){
  options.num 获取参数
}

全局数据

全局数据

app.js  页面定义
globalData:{outflow:100}

页面进行使用
var app = getApp();
app.globalData.outflow-=1;

常用全局方法

1. onReachBottom
   触底

2. onPullDownRefresh
   下拉

3. onShareAppMessage(){return {url,title,imageUrl}}
   分享

4. onShareTimelime()
   分享朋友圈

5. onAddToFavorites()
   收藏

6. onPageScroll({scrollTop:xxx}){}
   页面滚动

页面栈

卸载与隐藏

• 正常的从A->B A会隐藏
• 正常的从 A->B redirect  A会卸载
• 正常A->返回到首页  A页面会卸载

总结： redirect会卸载，navigateBack会卸载
navigate（缓存页面）

 小程序默认可以缓存5级页面

• A->B->C->D->E
  五个页面都存起来
• A->B->C->A->E
• redirect 当前页面会销毁
• A->B-redirect->C->D-<E
• wx.navigateBack({delta: 2})

使用npm

npm init -y
初始化项目

安装
npm i @vant/weapp -S --production 

工具->构建npm 

 

app.json，导入组件
"usingComponents": {
    "van-button": "@vant/weapp/button/index" 
  }, 

 

 

 页面中使用
<van-button type="primary">按钮</van-button>

创建组件Component

 

 

组件的传参

父传子
property

父：
<step value="10">

子 properties:{
     value:{type:Number,value:1}
    }
使用-只读：
this.data.value
 

1.子组件wxml中绑定addInfo函数，

<button type="primary" bindtap="addInfo">确定</button>

2.子组件js中定义函数addInfo

 addInfo(){
  let item = {
  title:'测试',
  money:8,
  category:'吃饭'
      }     //要传给父组件的参数
      
  this.triggerEvent('addInfo',item)  //通过triggerEvent将参数传给父组件
 }

3.父组件wxml中绑定（接收）自定义点击函数

<add-item  bind:addInfo="getAddInfo"></add-item>

4.父组件js中接收子组件传过来的参数

 getAddInfo(e){
    console.log(e.detail)  //{title:'测试',money:8,category:'吃饭'}