一、 网页创建插件
2. 控件信息填写
配置key等信息,请在基础信息中填写,ios需要配置此信息才能在分享消息后返回本应用。其中value为开发者在微信开放平台注册应用获取的AppID。 ps:注册微信开发平台应用https://open.weixin.qq.com/cgi-bin/applist?t=manage/list&lang=zh_CN&token=cd93d5e3c86bf640ad5a23635fa3a170fbe28d89 注意:微信开发平台注册的应用ios的Bundle ID和安卓版本的包名需和smobiler云平台应用包名一致 4. 进入功能定义板块,点击添加组件方法(一个组件可以创建多个方法) Ps:方法名是用户自定义的 2. 微信开放平台注册应用创建移动应用时,android中平台信息的应用签名为签名文件的MD5值,且字母小写,没有冒号。例如:q1w2e3r4t5y6u7i8o9p0q1w2e3r4t5y6 Ps:md5获取在云平台应用-应用安卓打包中,如图:
5. 生成下载模版并在开发 注意:为了防止控件无法整合到app中,不要修改js文件的内容 a.移动端插件开发模板生成和下载
b.服务端插件开发模板生成
二、结合到react-native,用来帮助做开发调试 (1)、 windows 1. 从网上下载node.js的官方4.1版本或更高版本。 2. 建议设置npm镜像以加速后面的过程(或使用科学上网工具)。 3. 安装react-native命令行工具 npm install -g react-native-cli
(2)、 mac 1. 从网上下载node.js的官方4.1版本或更高版本。 2. 建议设置npm镜像以加速后面的过程(或使用科学上网工具)。 3. 安装react-native命令行工具 npm install -g yarn react-native-cli 4. 安装完yarn后同理也要设置镜像源: 5. 如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权: sudo chown -R `whoami`/usr/local
(3)、 创建项目并添加组件 1. 创建并进入项目 react-native init WechatDemo cd WechatDemo 2. 在WechatDemo下新建文件夹plugin,并在模版解压后放入文件夹plugin中 3. 在终端WechatDemo目录下输入命令 npm install --save plugin/M22_sm_weixin react-native link react-native-sm-weixin 4. 用webstorm或Sublime Text打开WechatDemo,找到index.ios.js,修改代码,用xcode打开ios中项目文件进行调试 5. 用webstorm或Sublime Text打开SingtureDemo,找到index.android.js,修改代码同上,用Android Studio打开android项目文件进行调试
二、 ios和android平台开发 1. android手机端开发 注意:为了防止控件无法整合到app中,不要修改用于js交互的函数名 1. 将下载的模版解压,在android studi上打开其中的android文件夹 2. 参照微信开放平台资源中心接入文档开发
3. 修改文件支持控件显示和js交互,具体请参考sm_weixin.zip中android文件夹 4. 微信组件中包含需要从微信返回应用的Activity,所以此需要放在包名目录下 注意:这是微信独有的特例,一般组件不考虑
5. 完成修改后可调试。
2. ios手机端开发 注意:为了防止控件无法整合到app中,不要修改用于js交互的函数名 1. 用xcode打开ios文件夹中**.xcodeproj文件 2. 开发者需要在工程中链接上:SystemConfiguration.framework, libz.dylib, libsqlite3.0.dylib, libc++.dylib, Security.framework, CoreTelephony.framework, CFNetwork.framework 3. 修改文件支持控件显示和js交互,具体请参考sm_weixin.zip中ios文件夹 参照微信开放平台资源中心接入文档开发 4.完成修改后可调试。
四、完成开发后上传到网页 1. 找到WeixinDemo/node_modules/react-native-sm-weixin文件夹,将ios和android文件夹复制替换掉原来WeixinDemo/plugin/M22-sm-weixin中的ios和android文件夹。 注意:android文件夹中的build文件夹请删除,是运行调试需要的,上传并不需要,且会使压缩文件过大。 2. 把组件压缩成zip文件 注意:不要压缩最外层文件夹。 3. 获取的压缩文件上传到网页 4. 至此,组件的开发就完成了
五、服务端开发 1.将一 、5小点生成的服务端模板添加到项目中,并创建服务端创建组件,如图: 创建组件模板 注意:微信组件添加后重新生成项目才可在工具箱中找到微信组件 1.将微信组件添加到窗体,并进行应用注册,分享等 3.启动服务端项目
服务端代码: ps:代码中微信组件方法和参数均可自定义,此代码仅供参考
六、云平台应用打包插件 2.在应用打包时进行插件添加再进行打包,并将安装包安装到手机上 3.手机客户端显示效果 a..微信应用注册 注意:每个设备要进行一次微信应用注册
b.分享好友效果显示
c.分享朋友圈
|