小程序开发总结

熟悉小程序界面配置

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

app.json配置

  • pages 页面配置—哪个页面写在前面,哪个页面默认打开
  • window 窗口配置
  1. backgroundTextStyle–背景文字颜色
  2. navigationBarBackgroundColor–导航栏颜色
  3. navigationBarTitleText–导航栏标题
  4. navigationBarTextStyle–导航栏文字颜色

注意:.json文件不能注释,最后一个选项不能有逗号

基础语法

  • 标签
<view></view>
<text></text>
  • 文本展示 —{{}}
<view>{{msg}}</view>
<view>简单的js语法:{{3+3}}</view>
<view>msg长度:{{msg.length}}</view>
<view>{{msg.length>6?'奥利给':'giao'}}</view>
<view>字符加引号:{{msg+'I LOVE'}}</view>
  • 条件渲染
<view wx:if="{{flag}}">flag显示</view>
<view wx:if="{{num>5}}">团长</view>
<view wx:elif="{{num>2}}">营长</view>
<view wx:else="{{num>=0}}">列兵</view>
  • 列表渲染
<view wx:for="{{list}}" wx:key="index">
  {{index+1}}---{{item}}
</view>
<view wx:for="{{list}}" wx:for-item="myitem"
wx:for-index="myindex" wx:key="myindex"
>
{{myitem}}
</view>
  • template 模板
<template name="student">
<view>
    <view>名称:{{name}}</view>
    <view>年龄:{{age}}</view>
</view>
</template>
  • 导入模板 --import
<import src="./stu.wxml" />
<template is="student" data="{{...stu[0]}}"></template>
  • 引入内容 --include
<include src="./prc.wxml" />

组件

  • text
  • view
  • input
  • image

api --wx开头

  • wx.showToast({title:"",icon:‘none’})
  • wx.getStorageSync(k)获取本地存储
  • wx.setStorageSync(k,v)设置本地存储
  • wx.request({
    url:“xxx”,
    method:“GET||POST”,
    success(res){}
    }) 网络请求
  • wx.setNavigationBarTitle({title:“xxx”}) 设置标题
  • wx.stopPullDownRequest() 停止下拉刷新

事件 --bind

  • bindtap --轻点
  • bindinput --表单的值发生改变
  • 监听事件(.wxml): <view bindTag="showMsg"> </view>
  • 事件响应函数(.js)
showMsg(){
    console.log("xxx")
}
  • 事件的参数
  1. 表单 --js中通过e.detail.value
  2. 其他组件
<view bindTap="showMsg"
data-msg="i love"
></view>
  1. 在js中获取
showMsg(e){
    //e.target.dataset.msg 获取参数
}
  • 事件函数
  1. onReachBottom 触底
  2. onPullDownRefresh 下拉刷新
.json文件
"enablePullDownRefresh": true, 允许下拉刷新
"backgroundTextStyle":"dark" 下拉文字样式 light dark

导航

  • navigator

url

open-type

  1. navigate 默认跳转
  2. navigator 切换小程序
<navigator target="miniProgram" open-type="navigate" app-id="xxxx">
打开绑定的小程序</navigator>
  1. switchTab切换底部栏
  2. redirect 重定向
  3. relunch 重启
  4. navigateBack 返回
  5. exit退出
  • tabBar的配置
  1. color 文字颜色
  2. selectedColor 选中文字颜色
  3. list 列表
"pagePath":"页面地址",
"text":"首页",
"iconPath":"图片地址",
"selectedIconPath":"选中图片地址"
  • js切换
  1. wx.navigateTo({url:“xxxx”}) 跳转
  2. wx.navigateBack() 返回
  3. wx.redirectTo({url:“xxxx”}) 重定向
  4. wx.switchTab({url:“xxxx”}) 切换底部栏
  • 页面传参
  1. 通过url传参
pages/xxx/xxx?name=xxx&age=18
  1. 取参数
onload(options){
    console.log(options.name,options.age)
}

小程序的生命周期

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

页面的生命周期

  • onLoad --页面加载
  • onReady --渲染完毕
  • onShow --显示
  • onHide --隐藏
  • onUnload --卸载 redirect|navigateBack触发

小程序如何分包

app.json配置分包与分包预加载,通常底部栏对应页面作为主包对应的二级页面作为分包,包的大小2M最大16M,子包相互间不能引用,子包可以引用主包app的内容

小程序的npm如何构造的

  • npm初始化
  • 安装的时候–S --production
  • 详情允许npm插件
  • 工具构建npm

小程序如何实现更新数组某一项数据

使用ES6新增的属性可以动态的创建[“list[0]”]

小程序的组件

  • 组件应用
  1. 定义组件 --组件文件夹(cell)—cell.wxml|cell.wxss|cell.js|cell.json
  2. 在页面的json中注册组件
"using":{
    "cell":"/components/cell/cell"
}
  1. 在页面的wxml中使用
  • 组件的插槽
  1. 目的 --组件可以嵌套
  2. 传入插槽内容
<cell><view>定义插槽内容</view></cell>
  1. 在组件接收
<view>
    <slot></slot>
</view>
  • 命名插槽
  1. 定义
<view slot="head"></view>
<view slot="foot"></view>
  1. 使用插槽
<slot name="head">
<slot name="foot">
  1. 在组件的options选项中配置
options:{
    //多个slot
    multipleSlots:true,
  },
  • 样式隔离

options选项中配置
stylesolation

options:{
    //多个slot
    multipleSlots:true,
    styleIsolation:"isolated",
    // 样式隔离方式 --isolated隔离,--apply-shared页面样式分享到组件,--shared双向共享
  },
  • 外部类
  1. 组件中配置
externalClasses:["cell-class"],//01定义外部类  可以组件外部定义,class在组件内容使用,传递过来的class
  1. 组件中使用
<view class="cell-class"></view>
  1. 页面中传入
<cell cell-class="mycell">
  1. 在页面css中编写mycell
.mycell{color:#f70}
  • 组件的传参
  1. 页面参数传递
<cell url="/xx/xx/xx"><cell>
  1. 组件中定义
properties:{
    url:{type:String,value:''}
}
  1. 使用参数
this.data.url
  • 构造器
  1. Pages({})
  2. Components({})
  • pageLifeTimes:页面的生命周期
  1. show显示
  2. hide隐藏
  3. resize改变大小
  • lifetimes组件的生命周期
  1. created创建
  2. attached插入到页
  3. ready渲染完毕
  4. move移动
  5. detached移除
  6. error错误
  • behaviors混合
var myBehavior = require('my-behavior')
Component({
  behaviors: [myBehavior],
  )},
  • observers:监听
 observers: {
    'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时,执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    }
  }
  • 纯数据字段
  1. 纯数据字段是一些不用于界面渲染的data字段,可以用于提升页面更新性能
  2. 使用
 options: {
    pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
  },
  data: {
    a: true, // 普通数据字段
    _b: true, // 纯数据字段
  },
  • options选项
stylesolation:"isolated"
  • externalClasses:[“cell-class”]外部类
  • properties传入的数据
  • data初始数据
  • methods方法
    组件

登录

小程序

  • 添加open-type与事件
<button 
    open-type="getUserInfo"
    bindgetUserInfo="bindGetUserInfo"
></button>
  • bindGetUserInfo需要用户弹框授权,拿到用户的:头像、用户名
  • wx.login({})拿到一个code信息、通过ajax把用户信息、和code发送给服务器

服务器

  • appid+Appscecret+code发送给微信服务器
  • 微信服务器响应后得到open-id、session_key
  1. open-id—用户的唯一识别id
  2. 有了open-id 加上用户名+昵称 存入到自己服务器的数据库中

微信服务器

将open-id、session_key发送给服务器

微信登录流程—总结

  1. 在wx.login()函数中 获取code
  2. open-type=“getUserInfo” 获取到用户的头型和昵称等信息
  3. 把获取到的code通过ajax发送给服务器
  4. 服务器通过appid+scecret+code换取 openid和session_key
  5. 可以把openid+昵称存储到服务器
  6. 存储到服务器成功后可以自定义用户的信息 登录状态

微信登录流程

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页