微信小程序上线发布流程图文详解


Posted in Javascript onMay 06, 2019

最近花了一天左右的时间学习了下微信小程序的开发,试着练习一把的心态,搞了一个很简单的页面。

就当是学习总结吧:学习要点还是挺多的,通过查看官方接口文档,熟悉微信小程序开发工具,工程架构,相比传统页面开发类似,微信小程序也是由js文件,页面布局文件wxml和样式文件wxss

一、先登录微信公众平台,在小程序栏目里注册获取appid,在开发工具里填写该appid,打开开发工具进行编码工作。

1.1、知识点巩固。

app.json文件

{
 "pages":[
  "pages/huangbaokang/huangbaokang",
  "pages/zhanglulu/zhanglulu"
 ],
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#baf088",
  "navigationBarTitleText": "幸福婚姻",
  "navigationBarTextStyle":"black" 
 },
 "tabBar": {
  "list": [
   {
    "pagePath": "pages/huangbaokang/huangbaokang",
    "text": "黄宝康",
    "iconPath": "images/1.png",
    "selectedIconPath": "images/1.png"
   },
   {
    "pagePath": "pages/zhanglulu/zhanglulu",
    "text": "张露露",
    "iconPath": "images/2.png",
    "selectedIconPath": "images/2.png"
   }
  ]
 }


}

入口全局配置主要配置页签tabBar设置,全局pages定义,头部背景,及字体,网络超时等。

wxml标签的掌握

huangbaokang.wxml文件

<!--pages/huangbaokang/huangbaokang.wxml-->
<view class='title'>黄宝康的帅气照</view>
<view class='photo-list' wx:for="{{photos_hbk}}" >
 <!--遍历图片文件,生成各个view-->
 <view class='photo-item'>
  <image src='/images/hbk{{index+1}}.png'></image>
 </view>
</view>

huangbaokang.js文件

Page({

 /**
  * 页面的初始数据
  */
 data: {
  photos_hbk: ['1.png', '2.png', '3.png', '4.png']
 }
})

huangbaokang.wxss文件

/* pages/huangbaokang/huangbaokang.wxss */
.title{
 font-size: 70rpx;
 text-align: center;
}

.photo-list{
 margin-top: 20rpx;
}

.photo-item{
 width: 100%;
 height: 100%;
 margin-top: 20rpx;
}

具体到页面的开发,需要学习wxml各种标签的用法,语句wx:for的使用,及动态数据绑定(使用{{}})。

事件函数处理

进一步掌握事件处理等,绑定一个方法,在js文件中相对应一个方法。

二、上传发布审核上线

编码完之后,可以在开发工具右上角点击上传按钮将代码至微信后台。如下:

微信小程序上线发布流程图文详解

输入相关版本号确定之后可以在微信小程序后台管理处看到提交的版本。

微信小程序上线发布流程图文详解

上图我的是提交完之后的,提交完之后进入审核中,一般一两天就能查看审核结果,通过审核之后,还需要发布上线。

经过上面的操作之后就可以在微信里,小程序处进行搜索我们自己开发的程序了。

微信小程序上线发布流程图文详解

附:工程架构图

 微信小程序上线发布流程图文详解

以上所述是小编给大家介绍的微信小程序上线发布流程详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
jquery 实现的全选和反选
Apr 15 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
ES6的解构赋值实例详解
May 06 #Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 #Javascript
Vue动态组件和异步组件原理详解
May 06 #Javascript
微信小程序按钮点击跳转页面详解
May 06 #Javascript
详解vue中移动端自适应方案
May 05 #Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 #Javascript
彻底揭秘keep-alive原理(小结)
May 05 #Javascript
You might like
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
JS打印组合功能
2016/08/04 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
python+opencv实现阈值分割
2018/12/26 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
行政专员岗位职责
2014/01/02 职场文书
认购协议书范本
2014/04/22 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
2015年外联部工作总结
2015/04/03 职场文书
工作简报范文
2015/07/21 职场文书
赞助商致辞
2015/07/30 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
Mysql Online DDL的使用详解
2021/05/20 MySQL
实操Python爬取觅知网素材图片示例
2021/11/27 Python