移动端--混合开发2和ionic项目初始化 +微信公众号开发

258 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第4天,点击查看活动详情

一、移动端---移动端---微信公众号开发

二、移动端--混合开发2和ionic项目初始化(Phongap即Cordova、 ionic)

纯网页技术开发 app

Phongap 又叫 Cordova (最早是叫 Phongap 后来改名了 叫 Cordova)

cordova.axuer.com/

是一个 nodejs 模块,可以非常方便的使用纯网页的形式包一个壳子创建一个 app

可以把我们的 web 页面放在服务器上,直接打包生成安装包的时候把网址路径放进去。

以后更新项目的时候直接修改我们的服务器中的网页就好,十分省成本

步骤: npm install -g cordova :全局安装 npx cordova create 项目名 :创建项目 cordova platform add android :安装一个平台(其他平台也可以)

然后就会生成一个文件: 其中 www 这个文件夹就是我们要书写代码的地方 将我们之前做好的项目打包成 dist 文件,将 dist 目录里的所有内容替换到www里 在这里插入图片描述

ionic

ionic链接 ionic+angular

最新版本的 ionic 可以和 react 或者 vue 进行结合开发

ionic 是一个移动端开发框架,可以使用 web 技术开发手机 app

npm i @ionic/cli -g # 全局安装命令行
ionic start --type=react # 创建一个项目

三、移动端---微信公众号开发

微信公众号开发----官网链接 在这里插入图片描述

在这里插入图片描述

公众账号开发

mp.weixin.qq.com/

  • 服务号

    服务号提供的可开发的功能更多,每个月只能推送4条消息,服务号只能是企业或者组织进行申请

  • 订阅号

    订阅号的功能相对简单,每天可以推送一条消息。订阅号是在一个统一的分组中进行显示。订阅号个人也可以申请。

订阅号或者服务号如果要对接更多的api功能时,就需要做认证。每一次的认证费为300块,一年认证一次。

一般的公司,如果要维护自己的形象,一般都会运营两个账号(服务号和订阅号都会同时运营)

前端开发人员需要针对微信公众账号开发做的事情
  1. 根据ui设计师出的效果图,实现静态页面

    需要主要的事情,是移动端手机页面开发

    设置meta标签中的viewport

    img {
        max-width: 100%;
    }
    /* 大忌,一定要设置图片最大宽度,防止出现左右滚动条 */
    input {
        line-height: normal;
    }
    /* 让输入框的placeholder内容居中 */
    
  2. 对接JS-SDK,实现一些微信功能的调用

    js-sdk是微信公众账号提供的一个js包,可以方便我们调用微信的底层原生app接口

    1. js-sdk签名授权,此为最难的环节。还好这个功能是由公司服务器端做的
    2. js-sdk中的部分功能是需要认证的账号才能使用
    3. 微信公众账号支付,牵涉一个问题叫支付签名生成。这个签名还是由服务器生成的
微信公众账号登录授权
  1. 用户打开公众账号中的手机网站
  2. 判断是否有openid信息
  3. 如果有openid,就会根据openid获取用户信息
  4. 如果没有openid,会跳转到登录授权页
  5. 如果用户同意授权获取openid
  6. 会跳转到系统中的一个指定页面

weui.io/ 微信出的一个ui页面效果和微信主题一致

vux.li/ 是一个手机端的vue框架的ui效果组件库