admin管理员组文章数量:1794759
微信小程序云开发初阶
一:账号环境准备
1.申请小程序:
tips:不是公众号,不是订阅号,不是企业号,别弄错了;
2.登录后台后,找到APPID,记录一下;
3.微信开发者工具下载:
.html
4.开发工具安装:一路next,路径想换就换.
目录:自定义;
APPID:上面让你记录的;
后端服务:微信云开发;
点击创建
二:云开发快速扫盲
1.微信开发者工具打开后结构:
先展开你的项目目录,我的是workSpace;
再展开你的小程序目录,是miniprogram;
小结:
pages 存放页面的文件夹
--index首页
----index.js首页的业务逻辑
----index.json首页的配置
----index.wxml首页的模板
----index.wxss 首页的样式
--logs日志页面
utils 工具
--util.js工具js
.eslintrc.js 就是语法检测配置
app.js 小程序的入口js
app.json小程序的配置
app.wxss 小程序全局样式
project.config.json项目的配置
project.private.config.json 个人项目配置
sitemap.json站点地图(告诉微信搜索那些页面可以被收录)
2.先简单的说代码:
JSON配置: 比如app.json: 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab .
WXML模板: 和HTML类似,语法或者表达式不太一样; (更详细的文档可以参考WXML)
WXSS样式: 具有CSS的大部分特性,有些修改; (更详细的文档可以参考WXSS)
WXML事件: JS交互逻辑, 声明属性和方法,响应用户操作; (更详细的文档可以参考WXML - 事件)
3.再简单说环境和程序逻辑:
小程序的运行环境分成渲染层(WXML模板和 WXSS样式)和逻辑层(WXML事件);
这两层的通讯会由微信客户端在做中转,外部第三方服务器交互,也是微信中转;
(有关渲染层和逻辑层的详细文档参考小程序框架)
通过app.json的pages字段配置当前小程序的所有页面路径:
而写在pages字段的第一个页面就是这个小程序的首页也就是打开小程序看到的第一个页面;
Tips:
有关渲染层和逻辑层的详细文档参考小程序框架
有关于page构造器更多详细的文档参考注册页面 Page
有关组件可以参考小程序的组件
有关 API 可以参考小程序的API
三:云开发快速上手
1.在官方的quickstart上练手,先新建一个自己的页面;
- 在pages文件夹右键建立新的文件夹
- 在文件中右键新建页面
- 哪个page在最上面，默认显示哪页
- json要求严格语法，不能有多余的注释和逗号
- shaun.wxml:抽象成前台html文件
- shaun.js:业务逻辑
- shaun.wxss:抽象成前台css样式
- shaun.json:页面配置
2.把新建的页面作为quickstart的新首页
能看到,程序自动更新了app.json
最后 shaun.json中 ,页面配置一下:
代码语言：txt复制//允许下拉刷新
"enablePullDownRefresh":true,
//背景文字颜色
"backgroundTextStyle": "light",
//背景颜色
"backgroundColor":"#192",
//组件
"usingComponents":{}3.先写一个静态的假页面,练手HTML和CSS,我们来抄绿泡泡的皮吧:
一个假的绿泡泡页面如下图:
HTML代码(shaun.wxml):
代码语言：txt复制<!--pages/shaun/shaun.wxml-->
<view class="container">
<view class="header">
<text class="title">微信</text>
<view class="icons">
<image src="/images/icons/fdj.svg" class="icon" />
<image src="/images/icons/add.svg" class="icon" />
</view>
</view>
<view class="login-status">
<image src="/images/icons/computer.svg" class="icon" />
<text>Windows 微信已登录</text>
</view>
<view class="message-list">
<view class="message-item">
<image src="/images/icons/jsyh.svg" class="message-icon" />
<view class="message-content">
<text class="message-title">中国建设银行</text>
<text class="message-subtitle">交易提醒</text>
</view>
<text class="message-time">13:28</text>
</view>
<view class="message-item">
<image src="/images/icons/msyh.svg" class="message-icon" />
<view class="message-content">
<text class="message-title">中国民生银行</text>
<text class="message-subtitle">[链接]账户管理</text>
</view>
<text class="message-time">13:27</text>
</view>
<view class="message-item">
<image src="/images/icons/zgyh.svg" class="message-icon" />
<view class="message-content">
<text class="message-title">中国银行微银行</text>
<text class="message-subtitle">交易成功提醒</text>
</view>
<text class="message-time">13:25</text>
</view>
<view class="message-item">
<image src="/images/icons/wjzs.svg" class="message-icon" />
<view class="message-content">
<text class="message-title">文件传输助手</text>
<text class="message-subtitle">[小程序]第二赛段：包好用的出行必备礼...</text>
</view>
<text class="message-time">11:16</text>
</view>
<view class="message-item">
<image src="/images/icons/wkzs.jpg" class="message-icon" />
<view class="message-content">
<text class="message-title">王卡助手</text>
<text class="message-subtitle">月度话费账单提醒</text>
</view>
<text class="message-time">10:09</text>
</view>
<view class="message-item">
<image src="/images/icons/jd.jpg" class="message-icon" />
<view class="message-content">
<text class="message-title">京东购物</text>
<text class="message-subtitle">订单标记发货通知</text>
</view>
<text class="message-time">10月20日</text>
</view>
<view class="message-item">
<image src="/images/icons/xg.jpg" class="message-icon" />
<view class="message-content">
<text class="message-title">西瓜催收</text>
<text class="message-subtitle">500W已打款,剩下的再缓缓吧
本文标签：
微信小程序云开发初阶
版权声明：本文标题：微信小程序云开发初阶 内容由林淑君副主任自发贡献，该文观点仅代表作者本人，
转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1754636825a1704628.html，
本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论