原生小程序

一.小程序基础信息

uniapp 和 taro 都可以开发小程序 并且  可以开发ios Android

原生开发APP : ReactNative 和 Flutter 

 

小程序是双线程模型 : 

　　WXML模块和WXSS样式运行于渲染层  

　　JS脚本运行于 逻辑层

 

注册账户申请APPID :  地址

微信开发者工具 :  地址

vscode相关小程序的三个插件 : 

　　WXML - Language Service 

　　小程序开发助手

　　wechat-snippet

 

二.小程序配置文件信息

1.project.config.json 和 project.private.config.json  项目配置文件 :  项目名称、appid等

 

2.sitemap.json 小程序搜索相关的文件

 

3.app.json：全局的配置文件

　　A: pages - 页面路径列表

　　B: window - 全局的默认窗口展示

　　C: tabBar - 顶部tab栏的展示

 

4.page.json: 页面的配置文件

　　配置在page.json的会覆盖app.json的

 

5.全局的app.js文件

　　通常在app.js文件中,会有3种需求 : 

　　　　1.判断小程序进入的场景 : 在onLaunch和onShow生命周期回调函数中，会有options参数，其中有scene值

　　　　2.监听生命周期函数

　　　　3.全局共享的数据 : [ 代码实例 ] 

　　通过 getApp( ) 可以获取app.js文件的数据

 

6.页面的app.js文件

page函数 , 通常会做以下4件事

　　1.在生命周期函数中发送网络请求，从服务器获取数据；

　　2.初始化一些数据，以方便被wxml引用展示；

　　3.监听wxml中的事件，绑定对应的事件函数；

　　4.其他一些监听（比如页面滚动、上拉刷新、下拉加载更多等）

　　[ 4个的代码实例 ] 

 

三.小程序的内置组件

1.Text文本组件

　　text是行内元素

　　2个属性 : 

　　　　user-select 属性决定文本内容是否可以让用户选中

　　　　decode 属性是否解码

 

2.Button按钮组件

　　button 是块级元素

　　主要的是 open-type 属性 : 可以让用户获取一些特殊性的权限，可以绑定一些特殊的事件

 

3.View视图组件

　　view是块级元素

 

4.Image图片组件

　　常用的一个属性 : mode = widthFix

　　注意：image组件默认宽度320px、高度240px

　　wx.chooseMedia  :  获取本地手机相册的图片

 

5.ScrollView滚动组件

 实现滚动效果必须添加scroll-x或者scroll-y属性（只需要添加即可，属性值相当于为true了）

 垂直方向滚动必须设置scroll-view一个高度

 

6.组件的共同属性

 

 

 补充 : mark 属性 也是可以传递给事件的,也是通过event获取到的

 

四.小程序语法

1.样式

　　行内样式 > 页面样式 > 全局样式  [ 代码实例 ]

 

2.mustache语法  - {{ }} 

　　跟vue一样,不多说了

3.条件渲染

wx:if - wx:elif - wx:else

hidden 类似 v-show

4.列表渲染

wx:for 

变量名 固定的 : item

索引值 固定的 : index

wx:key  取的是每个item的某个属性

重新命名变量名 :   wx:for-item="book"

重新命名索引值 :   wx:for-index="i"

mustache语法 和 条件渲染 和 列表渲染 的  [ 代码实例 ]

 

5.wxs语法基本使用  -- 类似于过滤器  

创建一个.wxs结尾的文件 , 改文件只能用es5语法,并且只能用common JS 导出

使用 : 引入 并通过module命名

　　<wxs module="format" src="/utils/format.wxs"></wxs>

[ 代码实例 ]

 

五.小程序事件处理

通过 bind / catch[ 会阻止事件向上冒泡 ]  来绑定事件

capture-bind:tap 这个就是捕获事件

常见的事件 : 

　　input : bindinput ,  bindblur ,  bindfocus

　　scroll-view : bindscrolltowpper ,  bindscrolltolower

　　bindtap

详细的事件 : 地址

 

事件对象 event 

currentTarget  和  target  的区别 : 

　　target :  是触发事件的组件

　　currentTarget : 是处理事件的组件

 

事件参数的传递 :  通过  data-属性

获取参数 :  e.currentTarget.dataset.属性

[ 代码实例 ]

六.小程序组件化

自定义组件 : 创建component组件

自定义组件的步骤 : 

　　1.首先需要在 json 文件中进行自定义组件声明（将component 字段设为 true 可这一组文件设为自定义组件）

　　2.在wxml中编写属于我们组件自己的模板

　　3.在wxss中编写属于我们组件自己的相关样式 

　　4.在js文件中, 可以定义数据或组件内部的相关逻辑

 

　　5.引入自定义组件 : 在app.json 的  usingComponents 引入

  　　如果在app.json的usingComponents声明某个组件，那么所有页面和组件可以直接使用该组件

 

细节 : 

　　1.组件内不能使用id选择器、属性选择器、标签选择器

　　2.外部使用了标签选择器，会对组件内产生影响

　　3.如何让组件和外部组件相互影响 : 

　　　　在Component对象中，可以传入一个options属性，其中options属性中有一个styleIsolation（隔离）属性

　　　　styleIsolation有三个取值：　　　　　　

　　　　　　isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（默认取值)

　　　　　　apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面

　　　　　　shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置 了

 

 

 向组件传递数据 : 通过 properties 来接受  [ 代码实例 ]

 向组件传递样式 : 通过 externalClasses 来接受 [ 代码实例 ]

 自定义事件 : 通过  this.triggerEvent  发出事件  [ 代码实例 ]

 页面父组件可以调用  this.selectComponent ，获取子组件的实例对象  [ 代码例子 ]

 

七.插槽  slot

普通插槽  [ 代码实例 ]  跟vue一样  默认值通过css来写 [ 代码实例 ]

具名插槽 [ 代码实例 ]

　　具名插槽需要再 js 的 options 对象 添加 multipleSlots 为 true

　　使用 : slot='xxx'

 

八.behaviors 类似 mixins  [ 代码实例 ]

写一个js ,然后通过 :  behaviors 来引入 

 

九.生命周期

组件的生命周期   lifetimes  里面的5个生命周期

　　created  : 在组件实例刚刚被创建时执行

　　attached : 在组件实例进入页面节点树时执行

　　ready : 在组件在视图层布局完成后执行

　　moved : 在组件实例被移动到节点树另一个位置时执行

　　detached : 在组件实例被页面节点树移除时执行

 

组件所在页面的生命周期  pageLifetimes 里面的3个生命周期

　　show : 组件所在的页面被展示时执行

　　hide : 组件所在的页面被隐藏时执行  

　　resize : 组件所在的页面尺寸变化时执行

  

十.API

1.三个方法

　　wx.showToast 弹窗

      wx.showModal 对话框

　　wx.showActionSheet 抽屉框

 

2.分享功能 : onShareAppMessage

　　　获取用户信息  :  wx.getUserProfile

　　

3.获取设备信息 :  wx.getSystemInfo({ })

　　　　screenHeight : 是手机的高

　　　　screenWidth : 是手机的宽

　　　　windowHeight : 是除去顶部的高

 

4.获取位置信息  : wx.getLocation({ })

　　　　需要先授权 :  地址

　　　　

 

 

5.存储 : Storage 

　　　　同步存储数据的方法(需要执行完了,再进行下一行代码操作[常用于 : 存进去,就要取到])

　　　　　　wx.setStorageSync(string key, any data)

　　　　　　any wx.getStorageSync(string key)

　　　　　　wx.removeStorageSync(string key)

　　　　　　wx.clearStorageSync() 

　　　　异步存储数据的方法

　　　　　　wx.setStorage(Object object)

　　　　　　wx.getStorage(Object object)

　　　　　　wx.removeStorage(Object object)

　　　　　　wx.clearStorage(Object object) 

 

6.关于页面跳转的

　　界面的跳转有两种方式 : navigator组件 和 wx的API跳转　

　　wx的api跳转 :

　　　　

 

主要的 : 　　

　　wx.navigateTo :  保留当前页面，跳转到应用内的某个页面 ,  但是不能跳到 tabbar 页面

　　　　传递参数 ?key=value&key=value

　　　　在onload获取传递的参数

　　　　[ 代码实例 ]

　　

　　wx.navigateBack :   关闭当前页面，返回上一页面或多级页面

　　如何给返回上一层传递数据呢?

　　第一种方式 : 通过销毁组件,传递到上一层去 [ 代码实例 ]  [这种不管按钮,自带箭头,都可以生效]

　　第二种方式 : 通过点击按钮,传递到上一层去 [ 代码实例 ]

　　第三中方式 : 通过跳转wx.navigateTo的event方法触发事件,传递回来 [ 代码实例 ]

 

附加 : 小程序登录流程图

 

类似vuex -- 库 【hy-event-store】

npm i hy-event-store    GitHub有案例

 

[ 代码实例 ]   [ 代码实例2 ]