WX小程序

用户6383744403784
207 阅读11分钟

常识)开发小程序的必要前提

1.在小程序开发之初只有企业才有资格申请开发账号，也就是所谓的(appid)，但现在是可以以个人身份申请了

2.必须有(微信开发者工具) (理论)如何注册小程序开发账号 首先收索微信公众平台，点击进入，再点击右上角的(立即注册)，之后可以选择账号类型，目标明确我们选择(小程序) 有了账号我们还需要获取小程序开发的(appid) 还是在微信公众平台的首页中部找到(小程序开发文档)，进入文档后点击起步就会有明确的指示了

账号wosiliziyi1@163.com

原始ID:gh_c328a4a24a92 小程序id:wxa1614ff1d67d3559

小程序 命令面板 F1 微信小程序中有以下不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件（相当于html） .wxss 后缀的 WXSS 样式文件（相当于css） .js 后缀的 JS 脚本逻辑文件

就近原则：页面级别会覆盖程序级别的样式，页面级别的配置会覆盖程序级别的配置：在根目录：app.js，app.json，app.wxss应用程序级别的文件

image.png

引入图片时，src可以使用绝对路径，开头写一个‘/’，代表从根目录开始。 rpx会随着机型变化自适应响应式变化 某张image在系统查看了它的实际size px，在小程序中它的尺寸要么直接用size+rpx要么用size/dpr+px

小程序的rpx 图片等其他要使用rpx单位，rpx会根据屏幕尺寸与分辨率自动响应，改变大小； px只在iphone6上需要除以二，其他机型则不同； 在iphone6上：1px = 2rpx；----设计稿建议以iphone6为模板

在app.json中增加"window": { "navigationBarBackgroundColor": "#b3d4db" }可以将顶部背景色也配置成相同的颜色

image.png

  • pt:是长度单位
  • px:表示一个一个像素点
  • 屏幕清晰度：跟pt包含px个数有关系
  • reader:pt含多少px
  • ppi（dpi）:每英寸包含多少px
    image.png

image.png

1、pt逻辑分辨率与px物理分辨率 可以分别理解成 移动端开发的物理像素（设备像素）和CSS像素（逻辑像素）。

2、pt也称为逻辑分辨率，pt的大小和屏幕尺寸有关系，简单可以理解为长度和视觉单位。 px指物理分辨率，和屏幕尺寸没有关系。

3、1个pt可以由1个px构成，也可以由2个，还可以由3个甚至更多组成。 Iphone6下是由2个px才构成1个pt的
image.png

swiper轮播图的大小尺寸，由最外层的决定，只设置的大小是不会起作用的，而且swiper-item仅可放置在swiper组件中，宽高会自动设置为100%，充满整个swiper组件。 【注意：swiper和swiper-item都是容器，所以它们里面可以非常复杂可以放很多各种各样的东西，如按钮、图片等等】

image.png

swiper组件之滑块视图容器 其中只可放置swiper-item组件，否则会导致未定义的行为。 是否显示面板指示点indicator-dots="true" 是否自动切换autoplay="true" 纵向轮播vertical="true" 水平轮播vertical={{false}}

全局配置的app.json文件中一旦配置了某一种样式，所有的页面都将呈现出同样的样式。如果对不同页面样式有不同的需求，那么可以在页面配置中配置，可以分别显示不同的样式。

在app.json中配置全局文件的写法要加"window";在其他页面配置的json文件中则不需要加这个全局配置，只需要配置“window”下的子配置

image.png

设置元素垂直居中

方法一：vertical-align: middle; 方法二：设置父元素为弹性布局（推荐） display: flex; flex-direction: row; align-items: center;

想让内容在不同设备上随着缩放就使用rpx； 想在任何设备上显示的大小一样就使用px。

如果是在做几个水平方向上的元素之间的间距的话，这时候应该优先考虑rpx；如果搞不清rpx和px，那么大多数情况下优先选择rpx

image.png

生命周期加载顺序

  • onLoad
  • onShow
  • onReady 先加载，再显示，再渲染

image.png

  1. 小程序中是不能直接操作Dom节点
  2. 小程序中基本方法为数据绑定：{{ }}，在双括号中在js文件中定义的date的名称的属性---赋值方法
  3. 只有出现在data{ }中的数据，才能进行数据绑定；其他自定义则无法实现； 4.数据绑定中分为： 单向数据绑定（小程序目前是单向）----当wxml中的内容改变，js中的数据不会自动同时改变; 双向数据绑定---当wxml中的内容改变，js中的数据自动同时改变;

image.png

setData方法绑定数据(更新数据)

1.小程序中从服务器获取数据，数据一般都是写在onLoad生命周期函数中；当页面加载的时候去服务器中取数据；

2.将其他方法中的数据绑定到data中：this.setData( 变量名称)--setData方法，设置的内容只能是对象的形式。

3.同样，通过双花括号{{ 属性名称}}写入到wxml中；若是写在标签中的属性值则需要加引号；写在标签对内（内容）则不需要；

image.png

1.标签内属性值是字符串要将"true"改为false需要加双花括号，'{{false}}'这样才是布尔值false，字符串默认都是true;

2.双花括号连续不影响，根据前后获取数据

条件渲染：显示（隐藏）wx:if与列表渲染wx:for *使用 标签可将多个组件包装起来, 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性;

1.标签内插入 wx:if="{{ }}",内部填写js中属性名称；若wx：if="",空的str表示false,则隐藏，反之为true; wx:if="" 来判断是否需要渲染该代码块;也可以用 wx:elif 和 wx:else 来添加一个 else 块 参考文档:developers.weixin.qq.com/miniprogram…

2.wx:for 数组当前项的变量名默认为 item，可以指定数组当前元素的变量名； 参考文档：developers.weixin.qq.com/miniprogram… ****3.this.setData（）传入参数的只能是对象，若为数组，需将数组转化为一个对象中的属性的属性值传入； eg: this.setData（{ posts_key:数组名称}）---->onloade方法中 对应的page内容： page（{ posts_key：[ ] }）----表示page中传入的属性名称值为数组 对应的标签内wx:for属性：wx:for="{{ posts_key}}

1.ES6对象简写形式：this.setDatta({ 属性名称}}等同于this.setDatta({{属性名称：属性值}}--名与值相同； 2. 1）默认数组的当前项的下标变量名(索引）默认为 index wx:for-index=" index"，变量名称可变更； 2） 数组当前项的变量名默认为 item wx:for-item="item"，变量名称可变更；

参考文档地址：developers.weixin.qq.com/miniprogram… eg: 1.tap事件：写法 bindtap="函数名" /bind:tap="函数名" 建议第二种 2.在page中写入函数：方法 eg:page({ onTap:function(){ wx.navigateTo({url:" 相对路径 "})--地址无需文件名后缀 }) 3.wx.navigateTo({url:" "})---跳转页面方法，参数页面地址；括号里只能是对象，不能是str; 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。 参考文档：developers.weixin.qq.com/miniprogram…

路由跳转 重定向

wx.navigatorTo(Object object )与wx.redirectTo(Object object)区别 1.navigatorTo：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。跳转页面有返回键；--执行onhide函数 2.redirectTo：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。则无法返回之前已关闭的页面；--执行onunload(卸载）函数，关闭的页面不存在； 3.小程序主要学习：组件与API类

小程序的事件机制——catch与bind 区别

bind:xxx 绑定事件会冒泡 catch:xxx 绑定事件阻止冒泡

数据导出： module.exports = { postList:local_database }

数据导入，使用require()，写在js中的page()外面，【只能用相对路径】

var postsData = require('../../data/posts-data.js')//使用postsData 来接收数据

onLoad: function (options) { this.setData({ posts_key: postsData.postList//这里不能直接只写postsData，它是一个对象，里面包含真正的数据postList }); },

template 模板的使用（1）---wxml 参考文档： developers.weixin.qq.com/miniprogram… developers.weixin.qq.com/miniprogram… 流程如下： 1.在需要重复引用的页面目录下，创建要引用的新的page目录，目录内容只需创建wxml和xcss两种文件类型； 2.新的page目录wxml中定义标签Template模板: 3.Template模板的导入：在原始页面顶部导入 路径：相对路径（建议） ，绝对路径也可；单标签闭合； 4.Template模板的使用： 在原始页面剪切处

avatar
文章
阅读
粉丝