微信小程序开发步骤详解

2018-05-22|HiShop

导读：列表渲染当同一个View中需要放多个格式相同的控件时，尽量使用列表渲染的方式，代码容易维护，样式也美观。图片格式 1 微信小程序中使用的图片si...

列表渲染

当同一个View中需要放多个格式相同的控件时，尽量使用列表渲染的方式，代码容易维护，样式也美观。

图片格式

1 微信小程序中使用的图片size尽量要小，格式为.png.

可以在网上找在线格式转换工具或者图片缩小工具修改图片。

图片过大会影响代码审核和小程序工作效率，尤其是加载。

背景图设置

背景图即某个VIEW的背景图片，比如滚动图，目前仅支持url方式的图片。

当然，你在开发工具中调试时，本地图片做背景图也是可以的，但是手机上预览会看不到图片。

提供图片存储的服务器有很多，自己找个地方存好，获取URL就可以了

布局控件自适应

自适应就是你的布局不管在什么手机上都能显示，布局随手机屏幕大小进行缩小和放大。

只要把所有的尺寸相关单位修改为rpx即可，有时候你下载的Demo可能有其他尺寸单位，比如px,rem.

转换公式：

1px=2rpx

1rem约等于35rpx

标题栏、导航栏、状态栏、窗口

它们的格式在app.json的windows里设置，比如：

"window":{ "backgroundColor":"#f4f4f4", "backgroundTextStyle":"light", "navigationBarBackgroundColor":"#FF5722", "navigationBarTitleText": "智能生活宝", "navigationBarTextStyle":"#FFFFFF" },

详细说明见：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

除了windows里定义的属性，其他的格式是不可以修改的。

比如，标题栏中有无回退键，关闭键等。

----------导航栏可以通过tabBar设置多个导航，但仅可以指定页面、图标，字体等。位置什么的就不要考虑了。最少配置2个，最多配置五个。

比如下面配置了页面和帮助两个导航栏：

"tabBar":{ "color": "#959394", "selectedColor":"#959394", "backgroundColor":"#f0f0f0", "borderStyle": "white", "list": [ { "pagePath":"pages/index/index", "iconPath":"pages/images/home_b.png", "selectedIconPath":"pages/images/home.png", "text": "首页" }, { "pagePath":"pages/components/mine/mine", "iconPath":"pages/images/mine_b.png", "selectedIconPath":"pages/images/mine.png", "text": "帮助" } ] },

图片导航到页面

可以给图片或者图片所在的View设置事件，比如bindtap,然后在事件处理函数里调用设置导航的API函数：

wx.navigateTo({

url:"../components/general/general?code=menu"

})

“?”后面是提供给页面的参数名称和值。

详细介绍见：https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui.html

多个页面功能相似时的处理

当多个页面的布局相同，处理方式也相同，只是要处理的数据不同时，就可以仅写一个公共页面，其他控件导入页面时，通过传入不同的参数进行区分。

wx.navigateTo({

url:"../components/general/general?code=menu"

})

比如，上面在导航时，传入的参数code指明是menu 类型。

里面提供的代码中general页面就是一个公共页面。

图片和文字等多个空间同时触发一个事件

如果你希望再同一个View中的图片和文字或者其他控件触摸时都触发同一个事件，直接把这个事件放在view的配置里。

Text/textarea 焦点控制

Text/textarea控件仅用来显示数据时，要关掉自动聚焦，否则你所在页面时，点击控件就会自动弹出键盘。

属性auto-focus不设置或者值为 false即可。

文本滚动

若需要显示的文本内容大于文本框，能够自动出现滚动条，而不是放大文本框。

5 模板下载和使用

刚开始可以去网上找一些免费的Demo学习一下，事半功倍。

6 发布

当你确定你的小程序没有什么问题了，至少功能完善，没有严重bug.

可以开始发布。

上传代码

发布之前必须先上传代码，上传方式请参考第2节。

提交审核

登录微信公众平台->开发管理

图中开发版本即你最后一次上传的版本，点击“提交审核”之后，就会在审核版本中看到。一般个人审核需要1到3天吧，反正我的最长是3天，且中间有周末。最短的不到两小时。

提交审核后，若还没有进入审核系统，可以撤回审核。

审核通过后你会在管理员微信收到审核通过通知，当然微信公众号也可以查询。

审核通过后，需要你登录微信公众号手动点击发布，才会再线上版本中显示，这时用户就可以使用了。

7 推广

登录微信公众号->推广->修改关键词

每个人可以写10个关键词，以便用户在搜索公众号时可以搜到你的小程序

二维码

分享你的二维码图给用户

登录微信公众号->设置,下载二维码

通过公众号关联

如果你有其他公众号，也可以在其他公众号里关联你的小程序。

8 数据查看

登录微信公众号->数据分析，可以看到小程序各页面的访问情况和人数，转载等信息。

第 1 页【小程序开发】微信小程序怎么开发
第 2 页【小程序开发教程】微信小程序开发步骤详解