微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一):https://developer.aliyun.com/article/1497337
3.webview渲染
当我们打开console控制台,可以看到渲染支持提示
3.1 webview和skyline渲染模式
webview:老一点,稳定,支持老版本和新版本
skyline: 新一点,不太稳定,不支持老版本
我们调成webview模式,更稳定一些
项目配置—》app.json–>删除3个配置
“renderer”: “skyline”,
“rendererOptions”: {
“skyline”: {
“defaultDisplayBlock”: true,
“disableABTest”: true,
“sdkVersionBegin”: “3.0.0”,
“sdkVersionEnd”: “15.255.255”
}
},
“componentFramework”: “glass-easel”,
把这几个配置删了
删除完的app.json
ctrl+s 保存,发现console控制台就不会有那个版本告警提示了
4.新建页面
1 app.json中只有一个页面–》小程序–》只有一个页面
- 后期增加页面
增加页面方式一
1 在pages上右键–》新建文件夹
2 在新建的文件夹上–》右键–》新建Page
3 多出4个文件
xx.js
xx.wxml
xx.json
xx.wxss
4 在app.json中的page中多一行
“pages”: [
“pages/index/index”,
“pages/login/login”
]
增加页面方式二
1 在 app.json中,pages中,新增一行
2 会自动创建文件夹和页面
5.启动页面调整
当我们打开小程序,默认程序启动顺序基于app.json中来显示的
修改小程序一启动,显示的页面
方式一:在app.json中的pages中修改顺序,第一个先显示
“pages”: [
“pages/index/index”,
“pages/login/login”,
“pages/register/register”
],
方式二:通过entryPagePath配置:entryPagePath:小程序默认启动首页
在app.json中配置
“entryPagePath”: “pages/index/index”, # 居多
我们修改下注册页面wxml
在app.json中设置启动页面
可以看到启动页面已被修改
方式三:临时用–》写了个页面,临时看一下
- 添加编译模式
比如临时我们想把启动页面设置为login
在当前页面选择添加编译模式
将启动页面改为login
选完,点击确定,启动页面改为login
6.调试小程序
6.1 调试小程序基础库
微信小程序的基础库,一直不停地在做版本升级
- 转发功能
- 发送朋友圈功能
- 。。。
不同功能是在不同版本中加入的
- 假设我们基于老版本的基础库开发的–》有的新功能可能没有
- 在开发的时候,做功能如果发现写了没效果
- 确认一下这个基础库是否支持这个功能
参考地址:
https://developers.weixin.qq.com/miniprogram/dev/framework/client-lib/version.html
基础库就在右上角 详情 本地设置 调试基础库 里面选
最好选择占有率比较高的版本
看下有些功能的基础库支持
6.2 调试窗口
当我们打开调试器,会出现调试窗口
调试窗口各个功能如图所示
6.3 真机调试
一点击真机调试,会弹出二维码
微信扫描,就可以在微信上看到了
扫码后手机查看小程序
开发工具也会弹出真机调试窗口,显示手机信息
7.纯净项目
把项目不要的东西都删除–》只留核心–》开发
app.json
{
“pages”: [
“pages/index/index” # 就一个页面
],
“window”: {
“navigationBarTitleText”: “功能演示”, # 标题
“navigationBarBackgroundColor”: “#0000FF”, #颜色
“enablePullDownRefresh”: false, # 是否带下拉刷新
“backgroundColor”: “#00FFFF”, # 下拉刷新颜色
“backgroundTextStyle”: “dark” # light ,下拉刷新的点点什么颜色
},
“style”: “v2”,
}
app.wxss 空的
app.js
App({})
pages/index
index.js
Page({})
index.json
{
“usingComponents”: {
} }
index.wxml
<view class="container"> 景天科技 </view>
ndex.wxss
-空的
打开下拉刷新
8.快速上手
8.1 小程序常用组件
1.做过html的都知道
a标签
div标签
span标签
img标签
。。。
2.小程序没有这些,自己封装的叫组件
-https://developers.weixin.qq.com/miniprogram/dev/component/
可以看下小程序所有可用组件
3.text —》span 不换行,放文字
<text>我是首页</text> <text>我是首页333</text> <text>我是首页444</text>
4.view–》div 换行
<view>我是view</view> <view>我是view222</view> <view><text>撒东方闪电</text></view>
5.image 标签—》img
<image src="/images/b.jpg" style="width: 750rpx;height: 400rpx;"></image>
6.icon 图标
<icon type="success_no_circle" color="red"/> <icon type="cancel" color="#ddd"/>
8.2 tabbar配置
在底部或在顶部的 tab页
-几乎所有小程序都会有这个
如何设置
1 在app.json 配置
“tabBar”: {
“selectedColor”: “#b4282d”,
“position”: “bottom”,
“list”: [
{
“pagePath”: “pages/index/index”,
“text”: “首页”,
“iconPath”: “images/home.png”,
“selectedIconPath”: “images/home_select.png”
},
{
“pagePath”: “pages/my/my”,
“text”: “我的”,
“iconPath”: “images/my.png”,
“selectedIconPath”: “images/my_select.png”
}
]
},
2 创建页面 my
3 把图片复制到images目录下
查看小程序界面
点击 我的