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


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 相关文章推荐
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 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 FLEA中二叉树数组的遍历输出
2012/09/26 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
Nginx实现反向代理
2017/09/20 Servers
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
JS获取父节点方法
2009/08/20 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
jupyter 导入csv文件方式
2020/04/21 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
工程部主管岗位职责
2013/11/17 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
创业计划书之家教中心
2019/09/25 职场文书
导游词之包公祠
2019/11/25 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS