• M9_776489
    了解作者
  • 602.8KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-09 08:17
    上传日期
集思会Lite 小程序 访问 微信搜索集思会Lite 扫码访问 预览 该小程序的相关数据统计 累计用户数 历史累计访问小程序的用户数,同一用户多次访问不重复计; 访问人数 昨日访问小程序内所有页面的总用户数,同一用户多次访问不重复计。 新用户数 首次访问小程序页面的用户数,同一用户多次访问不重复计。 最近接触小程序,记录一下从零开发到提交审核正式发布的完整过程,和其中踩过的坑,与大家一起学习。 一.选型 项目的前期调研: 从小程序随着微信对小程序的推广越来越大,小程序的相关生态也日渐完善,于是,在进行小程序的相关开发工作之前,进行了开发的调研工作。 首先从项目框架的选型上,主要有3种选择,微信小程序的原生开发,wepy 框架开发,labrador框架开发,原生开发是使用小程序的自己的一套开发标准,参考web 的原生开发,wepy 是 vue 风格的小程序开发框架,labrador 则比较亲
jisihuiLite-master.zip
  • jisihuiLite-master
  • pages
  • bookListDetail
  • bookListDetail.wxml
    944B
  • bookListDetail.js
    2.4KB
  • bookListDetail.wxss
    1.8KB
  • userCenter
  • userCenter.wxml
    2.8KB
  • userCenter.wxss
    1.9KB
  • userCenter.js
    2.5KB
  • searchPage
  • searchPage.js
    1.2KB
  • searchPage.wxml
    832B
  • searchPage.wxss
    1.2KB
  • bookDetail
  • bookDetail.js
    6.7KB
  • bookDetail.wxml
    1.7KB
  • bookDetail.wxss
    2KB
  • index
  • index.wxss
    8.8KB
  • index.wxml
    4.4KB
  • index.js
    2.6KB
  • bookList
  • bookList.js
    2.5KB
  • bookList.wxss
    2KB
  • bookList.wxml
    872B
  • moreBook
  • moreBook.wxml
    900B
  • moreBook.js
    2.7KB
  • moreBook.wxss
    2.7KB
  • bookCity
  • bookCity.wxml
    11.2KB
  • bookCity.wxss
    6.5KB
  • bookCity.js
    521B
  • rankList
  • rankList.wxss
    2.8KB
  • rankList.wxml
    2.1KB
  • rankList.js
    2.3KB
  • userInfo
  • userInfo.wxss
    3.1KB
  • userInfo.wxml
    5.6KB
  • userInfo.js
    8KB
  • bookTag
  • bookTag.js
    2.1KB
  • bookTag.wxml
    904B
  • bookTag.wxss
    2.7KB
  • bookType
  • bookType.js
    2.7KB
  • bookType.wxss
    2.7KB
  • bookType.wxml
    904B
  • utils
  • api.config.js
    651B
  • util.js
    1.4KB
  • images
  • 2.jpg
    63.5KB
  • 1.jpg
    301.5KB
  • a.jpg
    62.9KB
  • .vscode
  • settings.json
    111B
  • assets
  • mine
  • selected.png
    932B
  • is_vip.png
    1.6KB
  • tequan.png
    49.7KB
  • icon_user.png
    2.9KB
  • logo.png
    19.3KB
  • not_vip.png
    1012B
  • nav
  • 4.png
    1.5KB
  • 3.png
    1.8KB
  • 1.png
    8.7KB
  • 2.png
    3.9KB
  • market.png
    2.2KB
  • home-light.png
    3.9KB
  • hot.png
    2.8KB
  • more-light.png
    7.2KB
  • home.png
    3.8KB
  • market-light.png
    2.2KB
  • search.png
    6.5KB
  • book_default.png
    9.8KB
  • find-light.png
    4KB
  • find.png
    4KB
  • more.png
    7.4KB
  • to-more.png
    2.6KB
  • typings
  • wx.d.ts
    73.6KB
  • template
  • searchMask.wxml
    1.4KB
  • project.config.json
    508B
  • config.js
    610B
  • jsconfig.json
    79B
  • app.js
    88B
  • LICENSE
    11.1KB
  • README.md
    12.6KB
  • app.json
    1.6KB
  • app.wxss
    123B
内容介绍
# 集思会Lite 小程序 ## 访问 * 微信搜索集思会Lite * 扫码访问 ![二维码](/images/2.jpg) ## 预览 ![](/images/1.jpg) ## 该小程序的相关数据统计 ![](/images/a.jpg) ### 累计用户数 历史累计访问小程序的用户数,同一用户多次访问不重复计; ### 访问人数 昨日访问小程序内所有页面的总用户数,同一用户多次访问不重复计。 ### 新用户数 首次访问小程序页面的用户数,同一用户多次访问不重复计。 最近接触小程序,记录一下从零开发到提交审核正式发布的完整过程,和其中踩过的坑,与大家一起学习。 ## 一.选型 项目的前期调研: 从小程序随着微信对小程序的推广越来越大,小程序的相关生态也日渐完善,于是,在进行小程序的相关开发工作之前,进行了开发的调研工作。 首先从项目框架的选型上,主要有3种选择,微信小程序的原生开发,wepy 框架开发,labrador框架开发,原生开发是使用小程序的自己的一套开发标准,参考web 的原生开发,wepy 是 vue 风格的小程序开发框架,labrador 则比较亲和 React,对于详细的区别和考量,我们来看看一些别人的讨论: 《微信小程序开发最佳实践》——skylor: ![](https://user-gold-cdn.xitu.io/2018/2/6/16169217b4e62eb7?w=1742&h=458&f=png&s=143272) 主要意思就是说使用原生开发少去了第三方框架的学习成本。 腾讯官方的wepy框架下相关人员提出的关于选型问题的讨论: ![](https://user-gold-cdn.xitu.io/2018/2/6/16169220cd888884?w=1920&h=2148&f=jpeg&s=390364) 总结一下就是,wepy 项目是官方维护的,它的可靠性是有保障的,它的下面这句话很重要: 从Web转向WePY时,开发者会拿Vue, React之类的来对比,因此会更多的看到的是WePY的不足,而原生切WePY的开发者更多的看到的是WePY的优势。 之前使用过 vue ,于是优先考虑了 wepy 的选择,但实际上你会发现比较尴尬的一点,这个 因为小程序本身的一些限制,在使用wepy的时候有时候像 vue,有时候又不像,你还得在其中去区分在 vue 里可以使用的方式在 wepy 里可不可以使用,反而会弄混淆,这样的学习成本倒不如一开始就使用原生来的简单清晰。 labrador直接放弃,原因见第一个截图。 至此,确定了目前选择原生开发。 ## 二.注册 如下图开始,填写相应的注册信息: ![image.png](https://user-gold-cdn.xitu.io/2018/2/26/161d01cc64407960?w=1232&h=741&f=png&s=89385) 注册成功以后,会在这里得到一个APPID: ![image.png](http://upload-images.jianshu.io/upload_images/165092-261bd603b7c40616.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 详细的请看这里[官方注册流程地址](https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=201828), ## 三.微信web开发者工具 确定选型后下载官方微信web开发者工具进行开发 [官方下载地址](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/uplog.html) 扫码登录,填入项目地址,APPID和项目名称: ![image.png](http://upload-images.jianshu.io/upload_images/165092-033dddd199a791af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 3.开发 * 目录结构: ``` | |___assets // 存储图片 | |___pages // 页面 | | |___index // 首页 | | |___index.wxml // 页面结构文件 | | |___index.wxss // 样式表文件 | | |___index.js // js文件 | |___utils // 全局公共函数 | |___app.js // 系统的方法处理文件 | |___app.json // 系统全局配置文件 | |___app.wxss // 全局的样式表 | |___config.json // 配置文件 ``` * 小程序配置文件app.json内容 具体的这个文件的配置起什么作用,可以看这里[app.json配置官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/file.html#JSON-%E9%85%8D%E7%BD%AE) ![image.png](http://upload-images.jianshu.io/upload_images/165092-0fbe2c509179085c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 而写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。 * 接口地址记得要登录小程序后台添加,如: 在[小程序管理后台-开发设置-服务器域名](https://link.juejin.im/?target=https%3A%2F%2Fmp.weixin.qq.com%2Fwxopen%2Fdevprofile%3Faction%3Dget_profile%26token%3D1316597147%26lang%3Dzh_CN)中将`request合法域名`配置为`https://xxx.com` ## 一些踩过的,少走弯路的坑: 1. wxss里面的css样式引用图片地址,不能引用本地的,比如: 解决方案,引用在线地址和使用image标签,或者图片可以使用base64。 2. 下拉刷新。使用onPullDownRefresh下拉处理下后,要在后面使用wx.stopPullDownRefresh()停止下来刷新,否则界面会停留在下拉以后的界面,也就是上方会留下下拉空白。(原来以为下拉后会自动收回上去的) ![image.png](https://user-gold-cdn.xitu.io/2018/2/26/161d01cc6611291c?w=271&h=145&f=png&s=2136) 3.wx.switchTab: url 不支持 queryString,也就是说,跳转到tab页面不支持带参数,同时也要注意跳转到底部tab页面和非tab页面调用不同方法。 4.有地方需要用到嵌入网页的功能,使用了发现不起效果,原来是有限制,如下: ![image.png](http://upload-images.jianshu.io/upload_images/165092-5c98dcfe68682cf5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 我是个人版,所以无法使用该组件。支付方面个人版也会有限制,有条件的推荐申请企业版。 5.绑定事件获取的target与currentTarget是有区别的 通常我们点击某个元素的时候需要获取到当前元素的属性,点击以后拿到的参数里有这两个属性需要区分一下,target 和 currentTarget。两者的区别在于: target:触发事件的源组件; currentTarget: 事件绑定的当前组件; 6.请求的接口地址需要是HTTPS的,所以需要升级下HTTPS,不用全站HTTPS,只要接口是HTTPS就可以了。此外,第一项里提到的在线图片地址可以不用是HTTPS。 7.任何情况下的视图更新只能通过setData()。 如果你以为数据变了,对应的视图也会相应改变,那就错了,这个时候你还是需要通过setData()方法改变相应变量,视图才会更新。 ## 四.提交体验版进行多用户实机测试 当我们本地开发好以后,点击预览,会得到一个二维码,扫描二维码即可在自己的手机上预览实机效果(不过每次修改后都得点击重新编译预览才行,并不方便),但是我想要别人也来测试实机效果的时候,把这个二维码发过去却不行,界面会提示: ``` Unauthorized access ``` 看来这个预览还的是开发者的自己的微信才行,那么如何让别的用户测试呢?点击这里: ![image.png](http://upload-images.jianshu.io/upload_images/165092-9b2cd09931035849.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 上传成功以后,登录小程序后台,选择开发管理: ![image.png](http://upload-images.jianshu.io/upload_images/165092-330fb0d4ab1ca8ab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 点击箭头,选择将刚才提交的版本作为体验版,然后点击版本号下面的文字就能得到开发版的分享二维码了。 但是这个二维码别人还不能用,原来还要进入左边的用户身份栏,然后点击箭头: ![image.png](http://upload-images.jianshu.io/upload_images/165092-9c13e9995bfcd581.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 添加用户并勾选体验者权限,该用户才能体验。否则得到的二维码也会提示没有权限。每添加一个用户都要扫一下二维码,而且只能是管理员添加,而且提示体验名额�
评论
    相关推荐