本文主要是介绍原生小程序，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一.小程序基础信息

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

 

这篇关于原生小程序的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！