微信小程序开发

注册

https://mp.weixin.qq.com/
上面这个网址,是注册小程序用的


小程序语法特点

在这里插入图片描述


小程序适配方案在这里插入图片描述


创建小程序

点开微信开发者工具,创建一个小程序
注意那个AppId,可以在最上面那个网址里面拿到
在这里插入图片描述
在这里插入图片描述


工具介绍

左上角个人中心,扫码登录
在这里插入图片描述
模拟器跟编辑器对应这两块区域
在这里插入图片描述
这是调试器
在这里插入图片描述
点击编译,就会重新跑一遍程序,点击预览,就会生成一个二维码,然后可以真机体验
在这里插入图片描述
注意,这个二维码只有开发的人扫才有用,如果想让别人扫,再次打开最上面的网址,点成员管理,添加它为体验成员就可以了
在这里插入图片描述
如果点自动预览,不用扫二维码,自动在开发者的手机上出现
在这里插入图片描述
点真机调试的话,会出现一些只有在真机上才会出现的报错
在这里插入图片描述


自动生成文件介绍

  • project.config.json
    就是一些配置的东西,基本不动代码;点击右边的详情,勾选这些项目,这个文件里的配置也就会随之改变
    在这里插入图片描述
    在这里插入图片描述
    唯一建议直接改的就是上面这两个,开发的过程中有更改的需求,就可以改
  • sitemap.json
    文件用于配置小程序及其页面是否允许被微信索引,其实就是影响小程序的曝光率,介绍文档看下面
    https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html
    在这里插入图片描述
    page就是哪些页面可以被索引
  • app.js
    app——application——主组件
    全局页面下必须要有app.js,文件里面必须要有App调用,作用是用来注册整个小程序的应用,详细看下面网址
    https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    去看里面的生命周期函数
  • app.json
    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,详细看下面网址
    https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
    在这里插入图片描述
    pages属性:页面路径列表
    在这里插入图片描述
    未指定 entryPagePath 时,数组的第一项代表小程序的初始页面(首页),注意这句话,看下面第三张图,结合这句话理解,首页将会是pages/index/index,如果把两行调换一下位置,首页将变成pages/logs/logs
    在这里插入图片描述
    在这里插入图片描述
    window属性:全局的默认窗口表现,用于设置小程序的状态栏、导航条、标题、窗口背景色
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • app.wxss
    放公共样式
    在这里插入图片描述
  • index文件夹
    index.js
    在这里插入图片描述
    index.wxml
    注意view标签,就相当于div
    在这里插入图片描述
    index.json
    局部配置文件
    在这里插入图片描述

新建page文件

在这里插入图片描述
在这里插入图片描述
当我们点击这个新建page时,会自动生成这四个index的文件,然后在app.json中自动写好路径


放置静态文件

在这里插入图片描述
微信开发者工具没办法在软件上直接粘贴图片,所以需要在文件夹里面操作;注意,建一个static文件夹,把images文件夹放进去比较好,注意看下图src怎么写
在这里插入图片描述


写CSS

在这里插入图片描述
注意class写法,然后到wxss文件下面写就行
在这里插入图片描述
讲一下适配,如果要适配,就要使用rpx做单位,记住1px = 2rpx
在这里插入图片描述
背景颜色完全改变,注意把最外层那个page高度变成百分之百,再把里面最外层的view的高度变成百分之百就行
在这里插入图片描述
优化,把这个page样式放到公共样式里面
在这里插入图片描述


数据绑定

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


生命周期函数

按以下图片顺序执行
在这里插入图片描述
在这里插入图片描述


事件绑定

在这里插入图片描述
在这里插入图片描述
注意,tap相当于vue的onclick
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
冒泡:先执行子,再执行父


路由跳转

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值